@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,sans-serif;scroll-behavior:smooth}body{background-color:#fff;color:var(--text);overflow-x:hidden}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}nav{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px;background-color:#fffffff2;box-shadow:0 2px 10px #0000001a;z-index:1000;transition:all .3s ease}.logo{display:flex;align-items:center;font-size:24px;font-weight:700}.logo span:nth-child(1){color:var(--text);margin-right:8px}.logo span.maths{color:var(--hot-pink)}.nav-links{display:flex;gap:30px}.nav-links .nav-link{background:none;color:var(--text);font-weight:500;cursor:pointer;position:relative;padding:8px 16px;border:none;border-radius:20px;transition:all .3s ease}.nav-links .nav-link:hover{background-color:#ff5c9d1a;color:var(--primary);transform:translateY(-3px)}.nav-links .nav-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--primary);transition:width .3s ease}.nav-links .nav-link:hover:after{width:100%}.auth-buttons{display:flex;gap:15px}.btn{padding:10px 20px;border-radius:25px;border:none;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-login{background-color:var(--primary);color:#fff}.btn-register{background-color:transparent;border:2px solid var(--primary);color:var(--primary)}.btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000001a}.hero{height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;margin-top:60px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:40px}.hero-text{flex:1;z-index:2}.hero-text h1{font-size:48px;margin-bottom:20px;line-height:1.2}.hero-text p{font-size:18px;margin-bottom:30px;line-height:1.6;color:#666}.btn-cta{padding:15px 30px;font-size:18px;background-color:var(--hot-pink);color:#fff;border-radius:30px;display:inline-block;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}.btn-cta:hover{transform:translateY(-5px);box-shadow:0 10px 20px #ff5c9d4d}.hero-image{flex:1;position:relative;z-index:1}.hero-bubble{width:450px;height:450px;background-color:#e5f0ff;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-bubble img{width:80%;height:auto;object-fit:cover;border-radius:40% 60% 70% 30%/40% 50% 60%;z-index:2}.accent-shape{position:absolute;width:200px;height:200px;background-color:#fff3b0;border-radius:40% 60% 70% 30%/40% 50% 60%;z-index:0}.accent-shape.top{top:-50px;left:-50px}.accent-shape.bottom{bottom:-50px;right:-50px}.floating-element{position:absolute;font-size:24px;color:var(--primary);filter:drop-shadow(0 3px 6px rgba(0,0,0,.1));animation:float 5s infinite ease-in-out}.floating-element:nth-child(1){top:20%;left:5%;animation-delay:0s}.floating-element:nth-child(2){top:30%;right:10%;animation-delay:1s}.floating-element:nth-child(3){bottom:20%;left:10%;animation-delay:2s}.floating-element:nth-child(4){bottom:30%;right:5%;animation-delay:3s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}.section{padding:100px 0}.section-title{text-align:center;margin-bottom:60px}.section-title h2{font-size:36px;margin-bottom:15px;position:relative;display:inline-block}.section-title h2:after{content:"";position:absolute;width:50%;height:4px;background-color:var(--accent);bottom:-10px;left:25%}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.feature-card{background-color:var(--light-bg);border-radius:20px;padding:30px;text-align:center;box-shadow:0 5px 15px #0000000d;transition:all .3s ease;overflow:hidden;position:relative}.feature-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #0000001a}.feature-icon{font-size:40px;margin-bottom:20px;color:var(--primary);position:relative;z-index:2}.feature-card h3{margin-bottom:15px;position:relative;z-index:2}.feature-card p{color:#666;line-height:1.6;position:relative;z-index:2}.feature-card:before{content:"";position:absolute;width:100px;height:100px;background-color:#f57f171a;border-radius:50%;top:-20px;right:-20px;transition:all .5s ease;z-index:1}.feature-card:hover:before{width:300px;height:300px}.how-it-works{background-color:var(--light-bg)}.steps-container{display:flex;flex-direction:column;gap:30px;max-width:800px;margin:0 auto}.step{display:flex;align-items:center;gap:30px;padding:30px;background-color:#fff;border-radius:20px;box-shadow:0 5px 15px #0000000d;transition:all .3s ease;position:relative;overflow:hidden}.step:hover{transform:scale(1.02);box-shadow:0 10px 25px #0000001a}.step-number{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background-color:var(--primary);color:#fff;font-size:24px;font-weight:700;border-radius:50%;flex-shrink:0}.step-content h3{margin-bottom:10px}.step-content p{color:#666;line-height:1.6}.step:after{content:"";position:absolute;width:3px;height:40px;background-color:var(--primary);bottom:-40px;left:60px;z-index:0}.step:last-child:after{display:none}.for-teachers{background:linear-gradient(to right,#fff,var(--light-bg))}.teachers-content{display:flex;align-items:center;gap:50px}.teachers-image{flex:1;text-align:center}.teachers-image img{max-width:100%;border-radius:20px;box-shadow:0 10px 30px #0000001a;transition:all .3s ease}.teachers-image img:hover{transform:rotate(2deg) scale(1.02)}.teachers-text{flex:1}.teachers-text h3{margin-bottom:15px;font-size:24px;position:relative;display:inline-block}.teachers-text h3:after{content:"";position:absolute;width:50%;height:3px;background-color:var(--accent);bottom:-5px;left:0}.teachers-text ul{list-style:none;margin-top:20px}.teachers-text li{margin-bottom:15px;position:relative;padding-left:30px}.teachers-text li i{position:absolute;left:0;top:5px;color:var(--primary)}.faq-container{max-width:800px;margin:0 auto}.faq-item{margin-bottom:20px;border-radius:15px;overflow:hidden;box-shadow:0 5px 15px #0000000d;transition:all .3s ease}.faq-item:hover{transform:translate(5px);box-shadow:0 5px 20px #0000001a}.faq-question{padding:20px;background-color:var(--light-bg);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-question i{transition:all .3s ease}.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:all .3s ease;background-color:#fff}.faq-active .faq-question i{transform:rotate(180deg)}.faq-active .faq-answer{padding:20px;max-height:1000px}footer{background-color:var(--primary);color:#fff;padding:60px 0 30px}.footer-content{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:40px}.footer-logo{flex:1;min-width:250px}.footer-logo h2{font-size:24px;margin-bottom:15px}.footer-logo h2 span{color:var(--accent)}.footer-logo p{line-height:1.6;margin-bottom:20px}.social-links{display:flex;gap:15px}.social-links a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:50%;color:#fff;transition:all .3s ease}.social-links a:hover{background-color:var(--accent);transform:translateY(-5px)}.footer-links{flex:1;min-width:200px}.footer-links h3{font-size:18px;margin-bottom:20px;position:relative;display:inline-block}.footer-links h3:after{content:"";position:absolute;width:50%;height:3px;background-color:var(--accent);bottom:-10px;left:0}.footer-links ul{list-style:none}.footer-links li{margin-bottom:10px}.footer-links a{color:#fff;text-decoration:none;transition:all .3s ease}.footer-links a:hover{color:var(--accent);padding-left:5px}copyright{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.active{opacity:1;transform:translateY(0)}.slide-in-left{opacity:0;transform:translate(-50px);transition:opacity .5s ease,transform .5s ease}.slide-in-left.active{opacity:1;transform:translate(0)}.slide-in-right{opacity:0;transform:translate(50px);transition:opacity .5s ease,transform .5s ease}.slide-in-right.active{opacity:1;transform:translate(0)}.scale-in{opacity:0;transform:scale(.8);transition:opacity .5s ease,transform .5s ease}.scale-in.active{opacity:1;transform:scale(1)}@media (max-width: 992px){.hero-content{flex-direction:column;text-align:center}.hero-bubble{width:350px;height:350px}.teachers-content{flex-direction:column}}@media (max-width: 768px){nav{flex-direction:column;padding:15px}.nav-links{margin:15px 0}.hero{height:auto;padding:100px 0}.hero-text h1{font-size:36px}.footer-content{flex-direction:column}}@media (max-width: 576px){.hero-bubble{width:250px;height:250px}.section-title h2{font-size:28px}.step{flex-direction:column;text-align:center}.step-number{margin-bottom:15px}.step:after{display:none}.features-grid{grid-template-columns:1fr}}:root{--primary: #ff5c9d;--accent: #f57f17;--hot-pink: #ff5c9d;--text: #333;--light-bg: #f8faff}html,body{height:100%;margin:0;font-family:Montserrat,sans-serif;background-color:#fff;color:var(--text)}.login-page{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--light-bg)}.login-container{background:#fff;padding:40px;border-radius:10px;box-shadow:0 5px 15px #0000001a;text-align:center;width:90%;max-width:600px;position:relative}.back-btn{position:fixed;top:10px;right:10px;background-color:#ccc;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.back-btn:hover{background-color:#bbb}.login-title{font-size:28px;margin-bottom:30px;color:var(--primary)}.login-boxes{display:flex;gap:20px;justify-content:center;flex-wrap:nowrap}.login-box{background:var(--light-bg);padding:20px;border-radius:8px;width:calc(50% - 10px);min-width:250px;box-shadow:0 5px 15px #0000000d;transition:transform .3s ease}.login-box:hover{transform:translateY(-5px)}.login-box h2{margin-bottom:20px;font-size:22px;color:var(--text)}.login-icon{display:block;font-size:30px;margin-bottom:10px}.google-login-btn{background-color:var(--primary);border:none;color:#fff;padding:10px 20px;border-radius:25px;font-size:16px;cursor:pointer;transition:all .3s ease}.google-login-btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000001a}.student-box .google-login-btn{background-color:#4caf50}.teacher-box .google-login-btn{background-color:#ff9800}@media (max-width: 768px){.login-box{width:calc(50% - 10px)}.dob-container{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:center;margin-bottom:20px}.dob-field{flex:1;min-width:100px}@media (max-width: 600px){.dob-container{flex-direction:column}}.dob-container div{display:flex;flex-direction:column;align-items:center}}form{width:100%;max-width:400px;margin:0 auto}form div{margin-bottom:15px}label{display:block;margin-bottom:5px;color:var(--text);font-weight:600}input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}input:focus{outline:none;border-color:var(--primary)}.error-message{color:#f03;margin-bottom:10px;text-align:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.success-modal{background-color:#fff;padding:30px;border-radius:10px;text-align:center;max-width:400px;width:90%;box-shadow:0 5px 15px #0003}.success-modal h2{color:var(--primary);margin-bottom:15px}.success-modal p{margin-bottom:20px}.success-modal .google-login-btn{margin-top:10px}:root{--brand-primary: #1e88e5;--text-body: #333;--text-heading: #111;--bg-soft: #fafafa;--border-soft: #e0e0e0;--radius: 6px;--max-width: 840px}.terms-wrapper{margin:0 auto;padding:3rem 1rem 4rem;max-width:var(--max-width);color:var(--text-body);line-height:1.6;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:0 4px 12px #0000000d}.terms-wrapper h1{color:var(--brand-primary);font-size:2rem;margin-bottom:.25rem;text-align:center}.terms-wrapper h2{color:var(--text-heading);margin:2rem 0 .5rem;font-size:1.25rem}.version{text-align:center;font-size:.9rem;margin-bottom:2rem;color:#666}.terms-wrapper ul{padding-left:1.25rem}.terms-wrapper li{margin:.5rem 0}.terms-wrapper a{color:var(--brand-primary);text-decoration:none}.terms-wrapper a:hover{text-decoration:underline}.terms-wrapper table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}.terms-wrapper th,.terms-wrapper td{border:1px solid var(--border-soft);padding:.5rem .75rem;text-align:left}.terms-wrapper th{background:#f0f4f8;font-weight:600}@media (max-width: 500px){.terms-wrapper{padding:2rem 1rem}.terms-wrapper h1{font-size:1.5rem}}.student-dashboard-container{background-color:var(--bg-color);min-height:100vh;display:flex;flex-direction:column;font-family:Poppins,sans-serif}.student-dashboard-nav{background-color:var(--card-bg);padding:1rem 2rem;box-shadow:0 2px 8px var(--shadow-color);display:flex;justify-content:space-between;align-items:center}.student-logo-section{display:flex;flex-direction:column;gap:.2rem}.student-site-title{font-size:1.5rem;margin:0;color:var(--text-color);font-weight:700}.student-dashboard-subtitle{font-size:.9rem;color:var(--text-muted);margin:0}.student-nav-actions{display:flex;align-items:center;gap:1.5rem}.student-user-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--hot-pink-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;font-size:1rem;transition:background-color .2s ease}.student-user-avatar:hover{background-color:var(--hot-pink-hover)}.student-user-menu{position:absolute;top:calc(100% + .5rem);right:2rem;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 15px var(--shadow-color);width:220px;overflow:hidden;z-index:999}.student-user-email{font-size:.9rem;color:var(--text-muted);margin:0 0 .4rem;word-break:break-all}.student-logout-button{display:block;width:100%;padding:.75rem 1.2rem;border:none;background-color:transparent;text-align:left;color:var(--hot-pink-color);cursor:pointer;transition:background-color .2s ease;font-weight:500}.student-logout-button:hover{background-color:#ff69b41a}.student-dashboard-content{flex:1;padding:2rem;max-width:800px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:2rem;margin-top:3rem}.start-learning-box{background-color:var(--hot-pink-color);color:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-color);cursor:pointer;transition:background-color .2s ease,transform .2s ease;text-align:center;margin-top:3rem}.start-learning-box:hover{background-color:var(--hot-pink-hover);transform:translateY(-2px)}.start-learning-box h3{margin:0;font-size:1.4rem;font-weight:600}.no-class-section{display:flex;flex-direction:column;gap:1rem}.join-class-box{background-color:var(--accent-light);color:var(--text-color);padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px var(--shadow-color);cursor:pointer;transition:background-color .2s ease,transform .2s ease;text-align:center;font-weight:500}.join-class-box:hover{background-color:var(--accent-hover);transform:translateY(-2px)}.join-class-form{background-color:var(--card-bg);border-radius:10px;padding:1.5rem;box-shadow:0 2px 10px var(--shadow-color)}.join-class-form h3{margin-top:0;margin-bottom:1rem;color:var(--text-color);font-weight:600}.join-class-form input{width:100%;padding:.8rem;border:1px solid var(--border-color);border-radius:8px;margin-bottom:.5rem;background-color:#00000005;transition:border-color .2s ease}.join-class-form input:focus{border-color:var(--hot-pink-color);outline:none}.error-message{color:red;font-size:.9rem;margin-bottom:.5rem}.form-buttons{display:flex;gap:1rem;margin-top:1rem}.form-buttons button{padding:.7rem 1.3rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.student-classrooms-grid{display:grid;grid-template-columns:1fr;gap:1rem}.student-classroom-card{background-color:var(--card-bg);border-radius:10px;padding:1.5rem;box-shadow:0 2px 8px var(--shadow-color);margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.leave-class-btn{margin-top:.5rem;padding:.6rem 1.2rem;border:none;border-radius:8px;background-color:var(--pink-color);color:var(--text-color);font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.leave-class-btn:hover{background-color:var(--pink-hover);transform:translateY(-2px)}.leave-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:999}.leave-modal-content{background-color:var(--card-bg);padding:2rem;border-radius:10px;box-shadow:0 4px 15px var(--shadow-color);width:90%;max-width:400px}.leave-modal-content h3{margin-top:0;margin-bottom:1rem;font-size:1.2rem;color:var(--text-color);font-weight:600}.leave-modal-buttons{display:flex;gap:1rem;margin-top:1rem}.confirm-leave-btn,.discard-leave-btn{padding:.7rem 1.3rem;border:none;border-radius:8px;font-weight:500;cursor:pointer}.confirm-leave-btn{background-color:var(--hot-pink-color);color:#fff}.confirm-leave-btn:hover{background-color:var(--hot-pink-hover)}.discard-leave-btn{background-color:var(--accent-light);color:var(--secondary-color)}.discard-leave-btn:hover{background-color:var(--accent-hover)}.student-classroom-card h3{margin-top:0;margin-bottom:.5rem;color:var(--text-color);font-weight:600}.student-classroom-card p{margin:0;color:var(--text-muted);font-size:.9rem}@media (max-width: 768px){.student-dashboard-nav{flex-direction:column;gap:1rem;align-items:flex-start}.student-dashboard-content{padding:1rem}}:root{--primary-color: #2E7D32;--primary-hover: #286A2C;--primary-light: #E8F5E9;--secondary-color: #F57F17;--secondary-hover: #E65100;--accent-color: #fff0e6;--accent-hover: #ffe6d9;--accent-light: #FFFDE7;--pink-color: #ffe9f0;--pink-hover: #ffd1e0;--hot-pink-color: #ff69b4;--hot-pink-hover: #ff5c9d;--bg-color: #f7f7f2;--card-bg: #ffffff;--text-color: #333333;--text-muted: #666666;--border-color: #f0f0f0;--shadow-color: rgba(0, 0, 0, .05)}.hot-pink-text{color:var(--hot-pink-color)}.dashboard-container{background-color:var(--bg-color);min-height:100vh;display:flex;flex-direction:column;font-family:Poppins,sans-serif}.dashboard-nav{background-color:var(--card-bg);padding:1rem 2rem;box-shadow:0 2px 8px var(--shadow-color);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}.logo-section{display:flex;flex-direction:column;gap:.2rem}.site-title{font-size:1.5rem;margin:0;color:var(--text-color);font-weight:700}.dashboard-subtitle{font-size:.9rem;color:var(--text-muted);margin:0}.nav-actions{display:flex;align-items:center;gap:1.5rem}.nav-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;cursor:pointer;background-color:transparent;border:none;color:var(--text-color);font-weight:500}.nav-btn:hover{background-color:#00000008}.user-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--hot-pink-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;font-size:1rem;transition:background-color .2s ease}.user-avatar:hover{background-color:var(--hot-pink-hover)}.user-menu{position:absolute;top:calc(100% + .5rem);right:0;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 15px var(--shadow-color);width:220px;overflow:hidden;z-index:200}.user-email{font-size:.9rem;color:var(--text-muted);margin:0;word-break:break-all;margin-bottom:.4rem}.logout-button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1.2rem;border:none;background-color:transparent;color:var(--hot-pink-color);cursor:pointer;transition:background-color .2s ease;font-weight:500}.logout-button:hover{background-color:#ff69b41a}.user-menu-info{padding:1.2rem;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}.breadcrumb{padding:1rem 2rem;background-color:var(--card-bg);border-bottom:1px solid var(--border-color);font-size:.9rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem}.breadcrumb-sep{color:var(--text-muted)}.dashboard-content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.classes-view,.students-view{display:flex;flex-direction:column;gap:2rem}.create-class-section{margin-bottom:1rem}.create-class-btn{padding:.7rem 1.3rem;background-color:var(--hot-pink-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500}.create-class-btn:hover{background-color:var(--hot-pink-hover);transform:translateY(-2px)}.create-class-form{background-color:var(--card-bg);border-radius:10px;box-shadow:0 2px 10px var(--shadow-color);padding:1.5rem}.create-class-form h3{margin-top:0;margin-bottom:1rem;color:var(--text-color);font-weight:600}.create-class-form input{width:100%;padding:.8rem;border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem;background-color:#00000005;transition:border-color .2s ease}.create-class-form input:focus{border-color:var(--hot-pink-color);outline:none}.form-buttons{display:flex;gap:1rem}.form-buttons button{padding:.7rem 1.3rem;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease;font-weight:500}.form-buttons button[type=submit]{background-color:var(--primary-color);color:#fff}.form-buttons button[type=submit]:hover{background-color:var(--primary-hover)}.form-buttons button[type=button]{background-color:var(--accent-light);color:var(--secondary-color)}.form-buttons button[type=button]:hover{background-color:var(--accent-hover)}.classrooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}.classroom-card{background-color:var(--card-bg);border-radius:15px;box-shadow:0 4px 15px var(--shadow-color);padding:1.8rem;transition:transform .3s ease,box-shadow .3s ease}.classroom-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000014}.classroom-card h3{font-size:1.2rem;margin:0 0 .8rem;color:var(--text-color);font-weight:600}.classroom-card p{margin:.2rem 0 1rem;color:var(--text-muted);font-size:.9rem}.classroom-actions{display:flex;flex-direction:column;gap:.5rem}.view-progress-btn{padding:.7rem;background-color:var(--hot-pink-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease;font-weight:500}.view-progress-btn:hover{background-color:var(--hot-pink-hover);transform:translateY(-2px)}.create-students-btn{padding:.7rem;background-color:var(--secondary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,background-color .2s ease;font-weight:500}.create-students-btn:hover{background-color:var(--secondary-hover);transform:translateY(-2px)}.edit-btn{padding:.7rem;background-color:var(--secondary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease;font-weight:500}.edit-btn:hover{background-color:var(--secondary-hover);transform:translateY(-2px)}.delete-btn{padding:.7rem;background-color:var(--pink-color);color:var(--text-color);border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease;font-weight:500}.delete-btn:hover{background-color:var(--pink-hover);transform:translateY(-2px)}.students-view{display:flex;flex-direction:column;gap:1.5rem}.back-to-classes-btn{padding:.6rem 1rem;background-color:var(--accent-light);border:none;border-radius:8px;color:var(--text-color);font-weight:500;cursor:pointer;transition:background-color .2s ease}.back-to-classes-btn:hover{background-color:var(--accent-hover)}.students-list{list-style:none;padding:0;margin:0}.students-list li{background-color:var(--card-bg);border-radius:6px;padding:.8rem;margin-bottom:.5rem;box-shadow:0 2px 4px var(--shadow-color)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:999}.modal-content{background-color:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color);width:90%;max-width:400px;position:relative}.modal-content h3{margin-top:0;margin-bottom:1rem;color:var(--text-color);font-weight:600}.modal-buttons{display:flex;gap:1rem;margin-top:1.5rem}.modal-buttons button{padding:.7rem 1.3rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.modal-buttons button:first-child{background-color:var(--hot-pink-color);color:#fff}.modal-buttons button:first-child:hover{background-color:var(--hot-pink-hover)}.modal-buttons button:last-child{background-color:var(--accent-light);color:var(--secondary-color)}.modal-buttons button:last-child:hover{background-color:var(--accent-hover)}@media (max-width: 768px){.dashboard-nav{flex-direction:column;gap:1rem;align-items:flex-start}.nav-actions{width:100%;justify-content:space-between}.classes-view,.students-view,.classrooms-grid{gap:1rem}.classrooms-grid{grid-template-columns:1fr}.dashboard-content,.breadcrumb{padding:1rem}}.main-container{min-height:100vh;background-color:#faf9f6;padding:2rem}.back-button{background:none;border:none;padding:8px 16px;cursor:pointer;color:#666;font-size:14px}.main-content{max-width:1200px;margin:0 auto;padding:2rem;text-align:center}.main-title{font-size:2.5rem;color:#333;margin-bottom:.5rem}.subtitle{color:#666;margin-bottom:3rem}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}.card{background:white;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 4px 6px #0000000d;display:flex;flex-direction:column;align-items:center;gap:1rem;transition:all .3s ease;position:relative;overflow:hidden}.card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #00000026}.card:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 70%);top:-150%;left:-150%;transition:all .5s ease}.card:hover:before{top:-50%;left:-50%}.card:hover .card-icon{transform:scale(1.1) rotate(5deg)}.card-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:1rem}.n-icon{background-color:#e8faf1;color:#4ade80}.a-icon{background-color:#f0f7ff;color:#3b82f6}.t-icon{background-color:#fff7d6;color:#f59e0b}.f-icon,.four-icon{background-color:#ffe5ec;color:#e11d48}.r-icon{background-color:#f2e8ff;color:#8b5cf6}.m-icon{background-color:#e7f0ff;color:#2563eb}.card h2{font-size:1.5rem;color:#333;margin:0}.card p{color:#666;margin:0;font-size:.9rem}html,body{margin:0;padding:0;background-color:#faf7f2}.addition .operation-icon{background-color:#e7f8ec;color:#38a169}.subtraction .operation-icon{background-color:#ffefef;color:#e53e3e}.multiplication .operation-icon{background-color:#fff7e6;color:#dd6b20}.division .operation-icon{background-color:#ebf8ff;color:#3182ce}.bedmas .operation-icon{background-color:#f7ebff;color:#805ad5}.mixed .operation-icon{background-color:#ecfdf5;color:#2f855a}.container{max-width:800px;margin:0 auto;padding:80px 20px 40px}h1{font-size:3rem;color:#333;margin-bottom:1rem;font-weight:700;text-align:center}.highlight{color:#ff69b4;position:relative;display:inline-block}.highlight:after{content:"";position:absolute;width:100%;height:8px;background:rgba(255,105,180,.2);bottom:5px;left:0;z-index:-1;border-radius:4px}.subtitle{font-size:1.2rem;color:#666;margin-bottom:2rem;text-align:center}.stages-grid{display:grid;grid-template-columns:1fr;max-width:700px;margin:0 auto;gap:1.5rem}.stage-card{border-radius:20px;padding:2rem;text-align:left;transition:all .3s ease;box-shadow:0 8px 16px #00000014;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;position:relative}.stage-card:before{content:"";position:absolute;width:120px;height:120px;background:rgba(255,255,255,.1);border-radius:50%;top:-60px;right:-60px}.stage-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px #0000001f}.stage-card{background:#FFEBEE}.stage-card:nth-child(2){background:#FFF3E0}.stage-card:nth-child(3){background:#E8F5E9}.stage-card:nth-child(4){background:#E3F2FD}.stage-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:1.5rem}.stage-title{font-size:2rem;font-weight:700;color:#333}.progress-badge{background-color:#ffffff4d;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;color:#555}.stage-description{font-size:1.1rem;color:#666;margin-bottom:1.5rem}.levels-container{width:100%}.level-btn{background-color:#fffc;border:none;padding:1rem 1.2rem;border-radius:16px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;text-align:left;display:flex;flex-direction:column;box-shadow:0 4px 6px #0000000d;color:#444;position:relative;overflow:hidden;margin-bottom:.8rem}.level-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000001a;background-color:#ffffffe6}.level-title-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}.level-id{font-weight:700;font-size:1.2rem}.check-icon{color:#4caf50;font-weight:700}.level-description{font-size:.95rem;color:#666;margin-bottom:.2rem}.working-on-text{color:orange;font-size:.85rem;font-weight:600;margin-top:.3rem}.level-btn:after{content:"";position:absolute;left:0;top:0;height:100%;width:8px;border-radius:4px 0 0 4px}.level-btn.completed:after{background:#4CAF50;width:12px}.level-btn.working-on:after{background:orange;width:12px}.back-button{position:fixed;top:20px;left:20px;background-color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;color:#555;transition:all .2s ease;font-weight:500;z-index:100}.back-button:hover{background-color:#f5f5f5;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}@media (max-width: 768px){.container{padding:70px 10px 30px}h1{font-size:2.5rem}.stage-title{font-size:1.8rem}.level-btn{padding:.8rem 1rem}}.multiplication-container{min-height:100vh;background-color:#faf7f2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem}.guide-button{display:inline-flex;align-items:center;padding:.8rem 1.5rem;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;margin-bottom:3rem;color:#fff;font-size:1.2rem;font-weight:500}.guide-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000001a}.multiplication .guide-button{background:linear-gradient(45deg,#FF69B4,#ff8fc7);box-shadow:0 4px 8px #ff69b44d}.multiplication .guide-button:hover{background:linear-gradient(45deg,#ff79bc,#ff9fd0);box-shadow:0 6px 12px #ff69b466}.guide-button svg{margin-right:.5rem;width:20px;height:20px}.energy-container{display:flex;align-items:center;width:100%;margin:1rem 0 1.5rem}.energy-bar{flex-grow:1;height:12px;background:rgba(255,255,255,.5);border-radius:6px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px #0003}.energy-fill{height:100%;width:0%;border-radius:6px;transition:width .5s ease}.multiplication .energy-fill{background:linear-gradient(90deg,#FF69B4,#ff8fc7)}.celebration-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}.celebration-modal.show{opacity:1;visibility:visible;animation:modalFadeIn .5s ease forwards}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.celebration-content{background:linear-gradient(135deg,#fff,#f9f9f9);padding:2rem;border-radius:20px;box-shadow:0 10px 30px #0003,0 0 20px #ff69b44d;text-align:center;max-width:500px;width:90%;position:relative;overflow:hidden;animation:contentPop .5s ease forwards;border:2px solid rgba(255,255,255,.8)}@keyframes contentPop{0%{transform:scale(.8)}50%{transform:scale(1.05)}to{transform:scale(1)}}.celebration-content h2{color:#ff69b4;font-size:2.2rem;margin-bottom:.8rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:titleBounce 1s ease infinite alternate}@keyframes titleBounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.celebration-content p{color:#555;font-size:1.1rem;margin-bottom:1.5rem;line-height:1.5}.button-group{display:flex;justify-content:center;gap:15px;margin-top:20px}.celebration-btn{padding:12px 25px;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 8px #0000001a}.celebration-btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000026}.celebration-btn:active{transform:translateY(-1px)}.continue-btn{background:linear-gradient(45deg,#ff69b4,#ff8cc6);color:#fff}.continue-btn:hover{background:linear-gradient(45deg,#ff5baa,#ff7dbd)}.next-btn,.next-stage-btn{background:linear-gradient(45deg,#2ecc71,#4cd137);color:#fff}.next-btn:hover,.next-stage-btn:hover{background:linear-gradient(45deg,#27ae60,#44bd32)}.confetti{position:fixed;width:15px;height:15px;background-color:#ff69b4;opacity:.8;border-radius:50%;animation:fall 3s ease-in-out forwards;z-index:1001;pointer-events:none}.confetti.square{border-radius:2px;width:10px;height:10px}.confetti.rect{border-radius:0;width:8px;height:16px;transform-origin:center}@keyframes fall{0%{transform:translateY(-100px) rotate(0);opacity:1}25%{opacity:1;transform:translateY(25vh) rotate(90deg) scale(1.2)}50%{transform:translateY(50vh) rotate(180deg) scale(1);opacity:.8}75%{transform:translateY(75vh) rotate(270deg) scale(.8);opacity:.6}to{transform:translateY(100vh) rotate(360deg) scale(.5);opacity:0}}.celebration-content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);transform:rotate(30deg);animation:shimmer 4s infinite;pointer-events:none;z-index:-1}@keyframes shimmer{0%{transform:translate(-100%) rotate(30deg)}to{transform:translate(100%) rotate(30deg)}}.streak-display{width:100%;max-width:600px;margin:1rem auto 0;background:linear-gradient(45deg,#ff69b4,#ff8fc7);color:#fff;padding:.5rem 1rem;border-radius:50px;font-weight:600;box-shadow:0 2px 8px #ff69b466;transition:all .3s ease;z-index:10;text-align:center}.structure-card{background:#fff;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 4px 6px #0000000d;display:flex;flex-direction:column;align-items:center;transition:all .3s ease;position:relative;overflow:hidden;cursor:pointer}.phase1 .structure-icon{background-color:#e7f8ec;color:#38a169}.phase2 .structure-icon{background-color:#ffefef;color:#e53e3e}.phase3 .structure-icon{background-color:#fff7e6;color:#dd6b20}.structure-name{font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:#333}.game-container{width:100%;margin-top:3rem;text-align:center;position:relative}.back-button{align-self:flex-start;display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;margin-bottom:2rem;color:#333;text-decoration:none}.stage-box{background:#fff;border-radius:15px;padding:1rem 2rem;box-shadow:0 4px 8px #0000001a;margin-bottom:1rem;display:inline-block}.problem-box{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 8px 16px #0000001a;margin-bottom:2rem;transform-origin:center;transition:all .3s ease;max-width:600px;margin-left:auto;margin-right:auto}.problem{font-size:2.5rem;font-weight:700;color:#333;margin-bottom:1rem}.multiplication,.addition-hint{font-size:2rem;font-weight:500;color:#333;margin-top:.5rem}.timer-button{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.6rem;font-size:1.25rem;font-weight:600;border:none;border-radius:50px;background:linear-gradient(45deg,#ff69b4,#ff8fc7);color:#fff;cursor:pointer;box-shadow:0 4px 12px #ff69b459;transition:transform .2s ease,box-shadow .2s ease}.timer-button:hover{transform:translateY(-3px);box-shadow:0 6px 16px #ff69b473}.timer-button:active{transform:translateY(0);box-shadow:0 3px 8px #ff69b44d}.message{font-size:1.2rem;font-weight:500;height:1.5rem;margin-top:1rem;opacity:0;transition:opacity .3s ease}.streak-display{width:100%;max-width:600px;margin:1rem auto 0;padding:.5rem 1rem;border-radius:50px;font-weight:600;color:#fff;text-align:center;background:linear-gradient(45deg,#ff69b4,#ff8fc7);box-shadow:0 2px 8px #ff69b466;transition:all .3s ease;z-index:10}.streak-display.streak-1,.streak-display.streak-2,.streak-display.streak-3,.streak-display.streak-4,.streak-display.streak-5,.streak-display.streak-6,.streak-display.streak-7,.streak-display.streak-8,.streak-display.streak-9,.streak-display.streak-10,.streak-display.streak-11,.streak-display.streak-12,.streak-display.streak-13,.streak-display.streak-14,.streak-display.streak-15,.streak-display.streak-16,.streak-display.streak-17,.streak-display.streak-18,.streak-display.streak-19{background:linear-gradient(45deg,#2ecc71,#4cd137);box-shadow:0 2px 8px #2ecc7166}.streak-display.streak-20{background:linear-gradient(45deg,#f1c40f,#fbc531);box-shadow:0 2px 8px #f1c40f66}.confetti{position:fixed;width:15px;height:15px;background:#ff69b4;opacity:.8;border-radius:50%;animation:fall 3s ease-in-out forwards;z-index:1001}.celebration-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:100;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.celebration-content{background:#fff;border-radius:20px;padding:2.5rem 3rem;text-align:center;box-shadow:0 8px 20px #0003}.celebration-btn{margin:.5rem .75rem;padding:.6rem 1.4rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.continue-btn{background:#2ecc71;color:#fff}.next-stage-btn{background:#3498db;color:#fff}.celebration-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000026}@media (max-width: 768px){.game-container{padding:70px 10px 30px;margin-top:2rem}.stage-box{font-size:.9rem;padding:.5rem 1rem}.problem-box{width:90%;padding:1.5rem;max-width:90%}.streak-display{max-width:90%}}.container{max-width:1200px;margin:80px auto 0;padding:2rem;text-align:center;position:relative}@media (max-width: 600px){.operations-grid{grid-template-columns:1fr}}.operation-container{background-color:#faf7f2;display:flex;flex-direction:column;align-items:center;padding:2rem}.game-container{width:100%;max-width:none;margin:0;padding:0;text-align:center;position:relative;background:transparent;margin-top:3rem}.back-button{align-self:flex-start;display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;margin-bottom:2rem;text-decoration:none;color:#333}.back-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.stage-box{background:white;border-radius:15px;padding:1rem 2rem;box-shadow:0 4px 8px #0000001a;margin-bottom:1rem;display:inline-block}.stage-box span{font-size:1.5rem;font-weight:600;color:#ff69b4}.problem-box{background:white;border-radius:20px;padding:2.5rem;box-shadow:0 8px 16px #0000001a;margin-bottom:2rem;transform-origin:center;transition:all .3s ease;position:relative;width:auto;max-width:600px;margin-left:auto;margin-right:auto}.problem{font-size:2.5rem;color:#333;margin-bottom:1rem;font-weight:700}.multiplication,.addition-hint{font-size:2rem;color:#333;margin-top:.5rem;font-weight:500}.input-box{width:200px;height:60px;font-size:2rem;text-align:center;border:3px solid #e0e0e0;border-radius:10px;margin-top:1rem;margin-bottom:1rem;transition:all .3s ease}.check-button{display:inline-block;padding:.6rem 1.2rem;font-size:1.2rem;font-weight:500;border:none;border-radius:8px;background-color:#ff69b4;color:#fff;cursor:pointer;transition:all .2s ease}.btn-group{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem}.choice-btn{padding:.6rem 1.2rem;font-size:1rem;font-weight:500;border:2px solid #e0e0e0;background-color:#fff;color:#333;border-radius:8px;cursor:pointer;text-transform:capitalize;transition:all .2s ease}.choice-btn:hover{background-color:#ff69b4;color:#fff;border-color:#ff69b4;transform:translateY(-2px);box-shadow:0 4px 8px #ff69b44d}.message{font-size:1.2rem;margin-top:1rem;font-weight:500;opacity:0;transition:opacity .3s ease;height:1.5rem}.message.correct{color:#2ecc71;opacity:1}.message.incorrect{color:#e74c3c;opacity:1}.correct-animation{animation:correctPulse .6s ease}.incorrect-animation{animation:incorrectShake .5s ease}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.05);background-color:#2ecc711a}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.streak-display{width:100%;max-width:600px;margin:1rem auto 0;background:linear-gradient(45deg,#ff69b4,#ff8fc7);color:#fff;padding:.5rem 1rem;border-radius:50px;font-weight:600;box-shadow:0 2px 8px #ff69b466;text-align:center;transition:all .3s ease;z-index:10}.streak-display.streak-1,.streak-display.streak-2,.streak-display.streak-3,.streak-display.streak-4{background:linear-gradient(45deg,#2ecc71,#4cd137);box-shadow:0 2px 8px #2ecc7166}.streak-display.streak-5{background:linear-gradient(45deg,#f1c40f,#fbc531);box-shadow:0 2px 8px #f1c40f66}.streak-animation{animation:streakPulse .5s ease}@keyframes streakPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.confetti{position:fixed;width:15px;height:15px;background-color:#ff69b4;opacity:.8;border-radius:50%;animation:fall 3s ease-in-out forwards;z-index:1001}.confetti.square{border-radius:0;width:8px;height:8px}.confetti.rect{border-radius:0;width:8px;height:16px}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.celebration-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:100;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.celebration-modal.show{opacity:1;visibility:visible}@media (max-width: 768px){.game-container{padding:70px 10px 30px;margin-top:2rem}.stage-box{font-size:.9rem;padding:8px 15px}.problem-box{width:90%;padding:1.5rem;max-width:90%}.streak-display{max-width:90%}}.back-button{position:absolute;top:20px;left:20px;background:none;border:none;padding:8px 16px;cursor:pointer;color:#666;font-size:14px;text-decoration:none;border-radius:8px;transition:background-color .2s ease}.structure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}.structure-card{background:#fff;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 4px 6px #0000000d;display:flex;flex-direction:column;align-items:center;transition:all .3s ease;overflow:hidden;cursor:pointer}.structure-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #00000026}.structure-card:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 70%);top:-150%;left:-150%;transition:all .5s ease}.structure-card:hover:before{top:-50%;left:-50%}.structure-icon{width:60px;height:60px;border-radius:50%;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform .2s ease}.structure-card:hover .structure-icon{transform:scale(1.1) rotate(5deg)}.phase1 .structure-icon{background-color:#e0f7ff;color:#0ea5e9}.phase2 .structure-icon{background-color:#fff9e5;color:#f59e0b}.phase3 .structure-icon{background-color:#f5e8ff;color:#9333ea}.structure-name{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.structure-description{color:#666;font-size:.95rem;margin:0}@media (max-width: 600px){.structure-grid{grid-template-columns:1fr}}body{margin:0;font-family:Montserrat,sans-serif;background-color:#faf9f6;color:#333}.back-button{position:absolute;top:20px;left:20px;background:none;border:none;padding:8px 16px;cursor:pointer;color:#666;font-size:14px;text-decoration:none;display:inline-block;border-radius:8px;transition:background-color .2s ease}.back-button:hover{background-color:#0000000d}.container{max-width:750px;margin:80px auto 0;padding:2rem;text-align:center;position:relative}.container h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.highlight{color:#ff69b4}.subtitle{color:#666;margin-bottom:3rem;font-size:1.1rem}.operations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}.operation-card{background:#fff;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 4px 6px #0000000d;display:flex;flex-direction:column;align-items:center;transition:all .3s ease;position:relative;overflow:hidden;cursor:pointer}.operation-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #00000026}.operation-card:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 70%);top:-150%;left:-150%;transition:all .5s ease}.operation-card:hover:before{top:-50%;left:-50%}.operation-icon{width:60px;height:60px;border-radius:50%;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform .2s ease}.operation-card:hover .operation-icon{transform:scale(1.1) rotate(5deg)}.length .operation-icon{background-color:#ebf8ff;color:#3182ce}.mass .operation-icon{background-color:#e7f8ec;color:#38a169}.capacity .operation-icon{background-color:#fff7e6;color:#dd6b20}.time .operation-icon{background-color:#ffefef;color:#e53e3e}.angle .operation-icon{background-color:#f7ebff;color:#805ad5}.operation-name{font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:#333}.operation-description{color:#666;font-size:.95rem;margin:0}.input-box{display:block;margin:1rem auto;width:200px;height:60px;font-size:2rem;text-align:center;border:3px solid #e0e0e0;border-radius:10px;transition:all .3s ease}.input-box:focus{outline:none;border-color:#ff69b4;box-shadow:0 0 8px #ff69b466}.check-button{display:block;margin:.5rem auto 1rem;padding:.6rem 1.2rem;font-size:1.2rem;font-weight:500;border:none;border-radius:8px;background-color:#ff69b4;color:#fff;cursor:pointer;transition:all .2s ease}.check-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #ff69b44d}.instruction-text{font-size:1.25rem;font-weight:600;color:#333;margin-bottom:1rem}.choice-group{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.choice-card{border:2px solid #e0e0e0;border-radius:8px;padding:1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;background:#fff}.choice-card:hover{transform:translateY(-4px)}.choice-card.selected{border-color:#ff69b4;box-shadow:0 0 0 3px #ff69b44d}.choice-card span{margin-top:.5rem;font-weight:600;color:#333}.cards-container{display:flex;justify-content:center;width:100%;max-width:600px;margin:0 auto 1rem;gap:1rem}.number-card{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:1.5rem;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;box-shadow:0 2px 6px #0000001a;cursor:grab;transition:transform .2s}.number-card:active{cursor:grabbing}.number-card:hover{transform:translateY(-4px)}.part-whole-container{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:1rem}.square-box{width:4.5rem;padding:.5rem;border:2px solid #333;border-radius:8px;background:#fff;text-align:center}.whole-box{width:6rem;padding:1rem .75rem;font-size:1.5rem}.part-row{display:flex;gap:1rem}.part-box{width:4.5rem;padding:.5rem;font-size:1.25rem}.square-box .label{font-size:.75rem;color:#666;margin-bottom:.25rem}.square-box .value,.square-box .part-input{font-size:1.25rem;font-weight:600;width:100%}.part-whole-container:before{top:1.5rem;left:calc(50% - 1.5rem)}.part-whole-container:after{top:1.5rem;left:calc(50% + 1.5rem)}@media (max-width: 600px){.operations-grid{grid-template-columns:1fr}.part-row{flex-direction:column}}.frac-input{display:inline-flex;flex-direction:column;align-items:center;margin:1rem auto}.frac-bar{width:100%;height:2px;background:#333;margin:2px 0}.frac-num,.frac-den{width:4.5rem;font-size:1.3rem;text-align:center;border:2px solid #e0e0e0;border-radius:6px}.frac-num:focus,.frac-den:focus{outline:none;border-color:#ff69b4;box-shadow:0 0 6px #ff69b466}svg text{-webkit-user-select:none;user-select:none}.simplify-hint{font-size:.9rem;color:#666;-webkit-user-select:none;user-select:none;margin-left:4px}.inline-fraction{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.inline-fraction .bar{width:100%;height:2px;background:#000;margin:2px 0}.student-progress-container{padding:2rem 3rem;max-width:1300px;margin:0 auto;width:100%;font-family:Poppins,sans-serif;background-color:var(--bg-color, #f7f7f2);position:relative;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.student-progress-container .section-title{font-size:2rem;font-weight:700;color:var(--text-color, #333333);margin-bottom:2rem;position:relative;padding-bottom:.5rem;animation:slideIn .5s ease-in-out}.student-progress-container .section-title:after{content:"";position:absolute;left:0;bottom:0;width:50px;height:4px;background:var(--primary-color, #2E7D32);border-radius:2px}.student-progress-container .students-table{width:100%;border-collapse:collapse;margin:2rem 0;background-color:var(--card-bg, #ffffff);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px #0000001a;animation:fadeIn .6s ease-in-out}.student-progress-container .students-table th{background-color:var(--primary-light, #E8F5E9);color:var(--primary-color, #2E7D32);font-weight:600;text-align:left;padding:1rem;font-size:1rem}.student-progress-container .students-table td{padding:1rem;border-bottom:1px solid var(--border-color, #f0f0f0);color:var(--text-color, #333333);font-size:.95rem}.student-progress-container .students-table tr:last-child td{border-bottom:none}.student-progress-container .students-table tr:hover{background-color:#2e7d320d;transition:background-color .2s ease}.student-progress-container .status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.student-progress-container .status-active{background-color:#4caf50}.student-progress-container .status-inactive{background-color:var(--secondary-color, #F57F17)}.student-progress-container .btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s ease,background-color .2s ease;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;margin:.5rem .5rem .5rem 0}.student-progress-container .btn-primary{background-color:var(--hot-pink-color, #ff69b4);color:#fff}.student-progress-container .btn-primary:hover{background-color:var(--hot-pink-hover, #ff5c9d);transform:translateY(-3px)}.student-progress-container .btn-secondary{background-color:var(--secondary-color, #F57F17);color:#fff}.student-progress-container .btn-secondary:hover{background-color:var(--secondary-hover, #E65100);transform:translateY(-3px)}.student-progress-container .btn-outline{background-color:var(--card-bg, #ffffff);color:var(--hot-pink-color, #ff69b4);border:2px solid var(--hot-pink-color, #ff69b4)}.student-progress-container .btn-outline:hover{background-color:var(--pink-color, #ffe9f0);transform:translateY(-3px)}.student-progress-container .learning-area-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.student-progress-container .area-box{background-color:var(--card-bg, #ffffff);border-radius:12px;padding:2rem;box-shadow:0 6px 20px #0000001a;text-align:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.student-progress-container .area-box:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 12px 30px #00000026}.student-progress-container .area-box:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,0) 80%,rgba(255,255,255,.3) 100%);z-index:1;transition:transform .5s ease}.student-progress-container .area-box:hover:before{transform:translate(10%)}.student-progress-container .area-box h3{font-size:1.3rem;margin-bottom:1rem;font-weight:600;position:relative;z-index:2}.student-progress-container .area-box.number-knowledge{border-top:5px solid #2E7D32}.student-progress-container .area-box.times-table{border-top:5px solid #FF9800}.student-progress-container .area-box.four-operations{border-top:5px solid #F44336}.student-progress-container .area-box.measurement{border-top:5px solid #3B82F6}.student-progress-container .area-box.rational-numbers{border-top:6px solid #9C27B0}} .student-progress-container .four-ops-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0}.student-progress-container .ops-box{background-color:var(--card-bg, #ffffff);border-radius:12px;padding:2rem;box-shadow:0 6px 20px #0000001a;text-align:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden;animation:fadeIn .6s ease-in-out}.student-progress-container .ops-box:hover{transform:translateY(-7px);box-shadow:0 12px 30px #00000026}.student-progress-container .ops-box:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,0) 80%,rgba(255,255,255,.3) 100%);z-index:1;transition:transform .5s ease}.student-progress-container .ops-box:hover:before{transform:translate(10%)}.student-progress-container .ops-box h3{font-size:1.2rem;margin-bottom:1rem;font-weight:600;position:relative;z-index:2}.student-progress-container .ops-box.addition{border-top:5px solid #4CAF50}.student-progress-container .ops-box.subtraction{border-top:5px solid #2196F3}.student-progress-container .ops-box.multiplication{border-top:5px solid #F44336}.student-progress-container .ops-box.division{border-top:5px solid #FF9800}.student-progress-container .ops-box.bedmas{border-top:5px solid #9C27B0}.student-progress-container .ops-box.word-problems{border-top:5px solid #607D8B}.student-progress-container .ops-box.length{border-top:5px solid #03A9F4}.student-progress-container .ops-box.mass{border-top:5px solid #2E7D32}.student-progress-container .ops-box.capacity{border-top:5px solid #FF9800}.student-progress-container .ops-box.time{border-top:5px solid #E91E63}.student-progress-container .ops-box.angle{border-top:5px solid #673AB7}.student-progress-container .times-table-boxes,.student-progress-container .can-do-workingon-boxes{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0}.student-progress-container .can-do-box{background-color:#2e7d3214;border-left:5px solid var(--primary-color, #2E7D32);padding:1.5rem;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease;animation:slideInLeft .5s ease-in-out;height:100%}.student-progress-container .can-do-box h3{color:var(--primary-color, #2E7D32);font-size:1.1rem;margin-top:0}.student-progress-container .can-do-box ul{list-style:none;margin:0;padding:0}.student-progress-container .can-do-box li{background-color:var(--card-bg, #ffffff);border-radius:8px;padding:1rem;margin-bottom:.8rem;box-shadow:0 2px 8px #0000000d;font-size:.95rem;color:var(--text-color, #333333);display:flex;align-items:center;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease}.student-progress-container .can-do-box li:before{content:"✓";margin-right:.8rem;color:var(--primary-color, #2E7D32);font-weight:700}.student-progress-container .can-do-box li:hover{transform:translate(-5px);box-shadow:0 4px 12px #2e7d3233}.student-progress-container .working-on-box{background-color:#f57f1714;border-left:5px solid var(--secondary-color, #F57F17);padding:1.5rem;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease;animation:slideInRight .5s ease-in-out;height:100%}.student-progress-container .working-on-box h3{color:var(--secondary-color, #F57F17);font-size:1.1rem;margin-top:0}.student-progress-container .working-on-box ul{list-style:none;margin:0;padding:0}.student-progress-container .working-on-box li{background-color:var(--card-bg, #ffffff);border-radius:8px;padding:1rem;margin-bottom:.8rem;box-shadow:0 2px 8px #0000000d;font-size:.95rem;color:var(--text-color, #333333);display:flex;align-items:center;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease}.student-progress-container .working-on-box li:before{content:"→";margin-right:.8rem;color:var(--secondary-color, #F57F17);font-weight:700}.student-progress-container .working-on-box li:hover{transform:translate(5px);box-shadow:0 4px 12px #f57f1733}.student-progress-container .can-do-box li .btn-outline{font-size:.85rem;padding:.4rem .8rem;background-color:#2e7d321a;color:#2e7d32;border:1px solid #2E7D32;border-radius:6px;margin:0}.student-progress-container .can-do-box li .btn-outline:hover{background-color:#2e7d3233;transform:translateY(-2px)}.student-progress-container .working-on-box li .btn-outline{font-size:.85rem;padding:.4rem .8rem;background-color:#f57f171a;color:#f57f17;border:1px solid #F57F17;border-radius:6px;margin:0}.student-progress-container .working-on-box li .btn-outline:hover{background-color:#f57f1733;transform:translateY(-2px)}.student-progress-container .progress-chart-container{background-color:var(--card-bg, #ffffff);border-radius:12px;padding:2rem;box-shadow:0 6px 20px #0000001a;margin:2rem 0;animation:fadeIn .7s ease-in-out}.student-progress-container .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in-out}.student-progress-container .modal-content{background-color:var(--card-bg, #ffffff);padding:2rem;border-radius:12px;box-shadow:0 10px 30px #0003;width:90%;max-width:500px;animation:zoomIn .3s ease-in-out}.student-progress-container .modal-content h2{color:var(--text-color, #333333);margin-top:0;margin-bottom:1.5rem}.student-progress-container .modal-content input{width:100%;padding:.8rem;margin-bottom:1rem;border:1px solid var(--border-color, #f0f0f0);border-radius:8px;font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}.student-progress-container .modal-content input:focus{outline:none;border-color:var(--primary-color, #2E7D32);box-shadow:0 0 0 3px #2e7d321a}.student-progress-container .modal-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:1.5rem}@media (max-width: 992px){.student-progress-container{padding:2rem}.student-progress-container .times-table-boxes,.student-progress-container .can-do-workingon-boxes{grid-template-columns:1fr;gap:2rem}.student-progress-container .four-ops-boxes{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.student-progress-container .learning-area-boxes,.student-progress-container .four-ops-boxes{grid-template-columns:1fr}.student-progress-container{padding:1.5rem}}@media (max-width: 480px){.student-progress-container .students-table th,.student-progress-container .students-table td{padding:.8rem .5rem;font-size:.8rem}.student-progress-container{padding:1rem}.student-progress-container .section-title{font-size:1.5rem}}.progress-overview-container{--primary-color: #2E7D32;--primary-hover: #286A2C;--primary-light: #E8F5E9;--secondary-color: #F57F17;--secondary-hover: #E65100;--accent-color: #fff0e6;--accent-hover: #ffe6d9;--accent-light: #FFFDE7;--pink-color: #ffe9f0;--pink-hover: #ffd1e0;--hot-pink-color: #ff69b4;--hot-pink-hover: #ff5c9d;--bg-color: #f7f7f2;--card-bg: #ffffff;--text-color: #333333;--text-muted: #666666;--border-color: #f0f0f0;--shadow-color: rgba(0, 0, 0, .05);display:flex;flex-direction:column;gap:1.2rem;padding:2rem;background-color:var(--bg-color);min-height:100vh;font-family:Poppins,sans-serif}.progress-overview-container h1{margin:0;font-size:1.7rem;color:var(--text-color);font-weight:700}.progress-overview-container h2,.progress-overview-container h3,.progress-overview-container p{margin:0;font-weight:500;color:var(--text-color)}.progress-overview-container .back-button{background-color:#f0f0f0;color:#333;padding:.75rem 1.4rem;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95rem;box-shadow:0 2px 5px var(--shadow-color);transition:background-color .2s ease,transform .2s ease;margin-right:.8rem}.progress-overview-container .back-button:hover{background-color:#e0e0e0;transform:translateY(-2px)}.progress-overview-container .learning-areas-boxes,.progress-overview-container .four-ops-boxes{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1rem}.progress-overview-container .area-box,.progress-overview-container .ops-box{flex:1 1 200px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 2px 8px var(--shadow-color);position:relative;white-space:nowrap}.progress-overview-container .area-box:hover,.progress-overview-container .ops-box:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000014}.progress-overview-container .area-box h3,.progress-overview-container .ops-box h3{color:var(--text-color);margin:0;font-size:1.1rem;font-weight:600}.progress-overview-container .ops-box.addition{border-top:6px solid #2E7D32}.progress-overview-container .ops-box.subtraction{border-top:6px solid #2196F3}.progress-overview-container .ops-box.multiplication{border-top:6px solid #f44336}.progress-overview-container .ops-box.division{border-top:6px solid #FF9800}.progress-overview-container .ops-box.bedmas{border-top:6px solid #9C27B0}.progress-overview-container .ops-box.word-problems{border-top:6px solid #607D8B}.progress-overview-container .ops-box.length{border-top:6px solid #03A9F4}.progress-overview-container .ops-box.mass{border-top:6px solid #2E7D32}.progress-overview-container .ops-box.capacity{border-top:6px solid #FF9800}.progress-overview-container .ops-box.time{border-top:6px solid #E91E63}.progress-overview-container .ops-box.angle{border-top:6px solid #673AB7}.progress-overview-container .area-box.number-knowledge{border-top:6px solid #2E7D32}.progress-overview-container .area-box.times-table{border-top:6px solid #FF9800}.progress-overview-container .area-box.four-operations{border-top:6px solid #F44336}.progress-overview-container .area-box.rational-numbers{border-top:6px solid #9C27B0}.progress-overview-container .area-box.measurement{border-top:6px solid #3B82F6}.progress-overview-container .table-scroll-wrapper{width:100%;overflow-x:auto;margin-top:1.5rem;background-color:var(--card-bg);box-shadow:0 2px 10px var(--shadow-color);border-radius:10px}.progress-overview-container table{border-collapse:collapse;margin:0;width:100%}.progress-overview-container table thead{background-color:var(--hot-pink-color);color:#fff}.progress-overview-container table thead th{padding:.8rem 1rem;font-weight:600;text-align:center;font-size:.95rem;border-right:1px solid var(--pink-hover);white-space:nowrap}.progress-overview-container table thead th:last-child{border-right:none}.progress-overview-container table tbody td{border:1px solid var(--border-color);padding:.8rem 1rem;text-align:center;vertical-align:top;font-size:.9rem;color:var(--text-color);transition:background-color .2s ease;white-space:nowrap}.progress-overview-container table tbody td:hover{background-color:var(--accent-light)}.progress-overview-container .name-btn{display:block;width:100%;padding:6px 10px;margin:0 0 6px;background-color:var(--card-bg);border:1px solid var(--border-color);border-left:4px solid currentColor;border-radius:8px;color:inherit;font-family:inherit;font-size:.85rem;text-align:left;line-height:1.35;cursor:pointer;box-shadow:0 1px 3px var(--shadow-color);transition:background-color .15s ease,transform .15s ease}.progress-overview-container .name-btn:hover{background-color:var(--accent-light);transform:translateY(-2px)}.progress-overview-container .name-btn:focus{outline:none;box-shadow:0 0 0 2px var(--hot-pink-hover)}@media (max-width: 768px){.progress-overview-container{padding:1rem}.progress-overview-container h1{font-size:1.2rem}.progress-overview-container .back-button{margin-bottom:1rem}.progress-overview-container table thead th,.progress-overview-container table tbody td{font-size:.8rem;padding:.6rem}.progress-overview-container .area-box,.progress-overview-container .ops-box{padding:1.2rem}}