.app-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow:hidden}.app-bg-shapes{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.bg-circle{position:absolute;border-radius:50%;opacity:.12}.c1{width:300px;height:300px;background:var(--color-primary);top:-80px;left:-80px;animation:bounce 6s ease-in-out infinite}.c2{width:200px;height:200px;background:var(--color-accent);bottom:-50px;right:-50px;animation:bounce 8s ease-in-out infinite}.c3{width:150px;height:150px;background:var(--color-secondary);bottom:30%;left:10%;animation:bounce 7s ease-in-out infinite 1s}.home-screen{width:100%;max-width:560px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;padding:1rem}.home-emoji{font-size:4rem;animation:bounce 2s ease-in-out infinite}.home-title{font-size:clamp(2rem,6vw,2.8rem);color:var(--color-primary);line-height:1.15}.home-subtitle{font-size:1.05rem;color:#6b7280;font-weight:500}.home-fact{background:#4f46e514;border:2px solid var(--color-border);border-radius:16px;padding:1rem 1.25rem;font-size:1rem;line-height:1.6;min-height:3.5rem;transition:.3s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.home-buttons{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px;margin-top:.5rem}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;font-size:1.05rem;font-weight:700;padding:.9rem 1.5rem;border-radius:14px;box-shadow:0 4px 14px #4f46e54d;width:100%}.btn-primary:hover{box-shadow:0 6px 20px #4f46e566}.btn-secondary{background:#fffc;color:var(--color-primary);font-size:1.05rem;font-weight:700;padding:.9rem 1.5rem;border-radius:14px;border:2px solid var(--color-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:100%}.btn-secondary:hover{background:#fff;box-shadow:var(--color-card-shadow)}.back-btn{background:#ffffffb3;color:var(--color-foreground);font-size:.95rem;font-weight:600;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--color-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.lesson-screen{width:100%;max-width:620px;z-index:1;display:flex;flex-direction:column;gap:1rem}.lesson-header{display:flex;align-items:center;gap:.75rem}.lesson-header h2{font-size:1.3rem;color:var(--color-primary)}.tab-bar{display:flex;gap:.5rem;border-radius:14px;background:#ffffff80;padding:.35rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tab-btn{flex:1;padding:.7rem .5rem;border-radius:12px;font-size:.9rem;font-weight:700;color:var(--color-foreground);background:transparent}.tab-btn:hover:not(.active){background:#4f46e50f}.lesson-card{background:#ffffffd9;border:3px solid;border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--color-card-shadow)}.lesson-emoji{font-size:3rem;text-align:center;margin-bottom:.5rem}.lesson-card h3{font-size:1.35rem;text-align:center;margin-bottom:.5rem}.lesson-subtitle{text-align:center;color:#6b7280;font-size:.95rem;margin-bottom:1rem}.lesson-examples h4{font-size:1.05rem;margin-bottom:.5rem;color:var(--color-foreground)}.lesson-examples ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}.lesson-examples li{background:var(--color-muted);padding:.65rem 1rem;border-radius:12px;font-size:.95rem;line-height:1.5;border-right:3px solid var(--color-primary-light)}.lesson-nav{display:flex;gap:.75rem}.lesson-nav .btn-primary{width:auto;flex:1;font-size:.95rem;padding:.75rem 1rem}.game-screen{width:100%;max-width:620px;z-index:1;display:flex;flex-direction:column;gap:1rem}.game-header{display:flex;align-items:center;justify-content:space-between}.game-header h2{font-size:1.2rem;color:var(--color-primary)}.game-progress{background:var(--color-primary);color:#fff;font-weight:700;font-size:.85rem;padding:.35rem .85rem;border-radius:20px}.game-instruct{text-align:center;font-size:1.05rem;color:#6b7280}.classify-card{background:#ffffffe6;border:3px solid var(--color-primary);border-radius:20px;padding:2rem 1.5rem;text-align:center;box-shadow:var(--color-card-shadow);animation:slideIn .4s ease}.classify-text{font-size:clamp(1.1rem,4vw,1.35rem);font-weight:600;line-height:1.7}.classify-buttons{display:flex;gap:.75rem}.btn-mechanical{flex:1;background:linear-gradient(135deg,#ea580c,#f97316);color:#fff;font-size:1.1rem;font-weight:700;padding:1rem;border-radius:14px;box-shadow:0 4px 14px #ea580c4d}.btn-mechanical:hover{box-shadow:0 6px 20px #ea580c66}.btn-chemical{flex:1;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;font-size:1.1rem;font-weight:700;padding:1rem;border-radius:14px;box-shadow:0 4px 14px #4f46e54d}.btn-chemical:hover{box-shadow:0 6px 20px #4f46e566}.feedback{text-align:center;font-size:1.1rem;font-weight:700;padding:.75rem 1rem;border-radius:14px;animation:fadeUp .3s ease}.feedback.correct{background:#16a34a1f;color:var(--color-success);border:2px solid var(--color-success)}.feedback.wrong{background:#dc26261a;color:var(--color-destructive);border:2px solid var(--color-destructive)}.mini-score{text-align:center;font-weight:600;color:#6b7280;font-size:.95rem}.quiz-card{background:#ffffffe6;border-radius:20px;padding:1.5rem;box-shadow:var(--color-card-shadow);animation:slideIn .4s ease;display:flex;flex-direction:column;gap:1rem}.quiz-question{font-size:clamp(1rem,3.5vw,1.2rem);font-weight:600;line-height:1.7}.quiz-options{display:flex;flex-direction:column;gap:.6rem}.quiz-option{text-align:right;background:var(--color-muted);color:var(--color-foreground);font-size:1rem;font-weight:600;padding:.85rem 1rem;border-radius:12px;border:2px solid transparent;transition:.2s}.quiz-option:hover:not(:disabled){background:#4f46e514;border-color:var(--color-border)}.quiz-option:disabled{cursor:default}.quiz-option.correct-answer{background:#16a34a1f;border-color:var(--color-success);color:var(--color-success)}.quiz-option.wrong-answer{background:#dc26261a;border-color:var(--color-destructive);color:var(--color-destructive)}.next-btn{width:auto;align-self:center;padding:.75rem 2rem}.result-screen{width:100%;max-width:560px;z-index:1}.result-big-card{background:#ffffffe6;border-radius:24px;padding:2.5rem 1.5rem;text-align:center;box-shadow:var(--color-card-shadow-hover);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;gap:1rem}.result-emoji{font-size:4rem;animation:pulse 2s ease-in-out infinite}.result-title{font-size:clamp(1.8rem,5vw,2.2rem);color:var(--color-primary)}.stars-container{font-size:2.5rem;min-height:3.5rem}.star-animated{animation:bounce .6s ease forwards;opacity:0;display:inline-block}.star-placeholder{font-size:1.5rem;color:#9ca3af}.result-stats{display:flex;align-items:center;gap:1rem;background:var(--color-muted);padding:1rem 1.5rem;border-radius:16px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-num{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--color-primary)}.stat-label{font-size:.85rem;color:#6b7280;font-weight:500}.stat-divider{width:1px;height:3rem;background:var(--color-border)}.result-message{font-size:1.1rem;font-weight:600;color:#6b7280;margin:.5rem 0}.result-card{background:#ffffffe6;border-radius:24px;padding:2rem;box-shadow:var(--color-card-shadow-hover);display:flex;flex-direction:column;align-items:center;gap:.75rem}.done-emoji{font-size:3.5rem}.result-stat{font-size:1.1rem;font-weight:600}@media (max-width: 480px){.app-container{padding:1rem}.home-title{font-size:1.7rem}.lesson-header{flex-wrap:wrap}.tab-bar,.classify-buttons{flex-direction:column}.classify-card{padding:1.25rem 1rem}.lesson-nav,.result-stats{flex-direction:column}.stat-divider{width:80%;height:1px}}@media (min-width: 768px){.home-buttons{max-width:380px}.tab-bar{padding:.5rem}.tab-btn{font-size:1rem}}@media (min-width: 1024px){.c1{width:400px;height:400px}.c2{width:300px;height:300px}}@media (min-width: 1440px){.home-screen,.game-screen,.lesson-screen{max-width:700px}}.login-screen{width:100%;max-width:500px;z-index:1}.login-card{background:#ffffffe6;border-radius:24px;padding:2.5rem 1.5rem;box-shadow:var(--color-card-shadow-hover);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;gap:1rem}.login-emoji{font-size:3.5rem;animation:bounce 2s ease-in-out infinite}.login-title{font-size:clamp(1.7rem,5vw,2.2rem);color:var(--color-primary);text-align:center;line-height:1.2}.login-subtitle{color:#6b7280;font-size:1rem;text-align:center}.login-form{width:100%;display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}.field-group{display:flex;flex-direction:column;gap:.35rem}.field-group label{font-weight:700;font-size:.95rem;color:var(--color-foreground)}.field-group input,.field-group select{font-family:var(--font-body);font-size:1rem;padding:.8rem 1rem;border:2px solid var(--color-border);border-radius:12px;background:#fff;color:var(--color-foreground);direction:rtl;transition:border-color .2s}.field-group input:focus,.field-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e51f}.form-error{color:var(--color-destructive);font-weight:600;text-align:center;font-size:.9rem}.login-footer{margin-top:.5rem;text-align:center}.link-btn{background:none;color:var(--color-primary);font-weight:700;font-size:.95rem;text-decoration:underline;padding:.5rem}.student-greeting{font-family:var(--font-heading);font-size:1.15rem;color:var(--color-accent);font-weight:700}.teacher-screen{width:100%;max-width:800px;z-index:1;display:flex;flex-direction:column;gap:.75rem}.teacher-header{display:flex;align-items:center;gap:.75rem}.teacher-header h2{font-size:1.3rem;color:var(--color-primary)}.stats-bar{display:flex;flex-wrap:wrap;gap:.5rem}.stat-chip{background:#4f46e514;border:1px solid var(--color-border);border-radius:20px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;color:#6b7280}.stat-chip span{color:var(--color-primary);font-weight:800;font-size:1.05rem}.teacher-controls{display:flex;gap:.5rem}.t-filter,.t-sort{flex:1;font-family:var(--font-body);font-size:.9rem;padding:.6rem .75rem;border:2px solid var(--color-border);border-radius:12px;background:#fff;color:var(--color-foreground)}.teacher-actions{display:flex;gap:.5rem}.btn-export{background:#fff;border:2px solid var(--color-border);border-radius:10px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;color:var(--color-foreground)}.btn-export:hover{border-color:var(--color-primary);background:#4f46e50a}.loading-text{text-align:center;color:#9ca3af;padding:2rem}.empty-state{text-align:center;padding:3rem 1rem;background:#ffffff80;border-radius:16px;color:#6b7280;font-size:1.05rem}.teacher-table-wrap{overflow-x:auto;border-radius:16px;background:#ffffffd9;box-shadow:var(--color-card-shadow)}.teacher-table{width:100%;border-collapse:collapse;font-size:.9rem}.teacher-table th{background:var(--color-primary);color:#fff;padding:.65rem .6rem;font-weight:700;text-align:center;font-size:.82rem;white-space:nowrap}.teacher-table th:first-child{border-radius:0 12px 0 0}.teacher-table th:last-child{border-radius:12px 0 0}.teacher-table td{padding:.55rem .6rem;text-align:center;border-bottom:1px solid var(--color-muted);font-weight:500}.teacher-table tr:last-child td{border-bottom:none}.teacher-table tr:hover td{background:#4f46e508}.teacher-table .not-completed td{color:#9ca3af}.cell-good{color:var(--color-success);font-weight:700}.cell-total{font-weight:800;color:var(--color-primary);font-size:1rem}.breakdown{width:100%;background:var(--color-muted);border-radius:14px;padding:1rem}.breakdown h4{font-size:.95rem;margin-bottom:.5rem;color:var(--color-foreground)}.break-row{display:flex;justify-content:space-between;padding:.35rem 0;font-weight:600;font-size:.95rem}.stat-low{color:var(--color-destructive)!important}.teacher-note{background:#f59e0b1a;border:1px solid #f59e0b;border-radius:12px;padding:.6rem 1rem;font-size:.85rem;color:#92400e;line-height:1.5}.import-msg{text-align:center;font-weight:700;font-size:.9rem;color:var(--color-success);animation:fadeUp .3s ease}.import-tab{display:flex;flex-direction:column;gap:.75rem}.import-card{background:#ffffffd9;border-radius:16px;padding:1.25rem;box-shadow:var(--color-card-shadow)}.import-card h3{font-size:1.05rem;margin-bottom:.5rem;color:var(--color-primary)}.import-card p{font-size:.9rem;color:#6b7280;margin-bottom:.75rem;line-height:1.6}.import-btn{display:inline-block;text-align:center;width:auto;padding:.7rem 1.5rem;font-size:.95rem}.import-msg{font-weight:700;color:var(--color-success);margin-top:.5rem}.guide-list{padding-right:1.25rem;display:flex;flex-direction:column;gap:.5rem}.guide-list li{font-size:.9rem;line-height:1.5;color:var(--color-foreground)}.btn-danger{border-color:var(--color-destructive)!important;color:var(--color-destructive)!important}.btn-danger:hover{background:#dc26260f!important}.teacher-tabs{margin-bottom:0}@media (max-width: 480px){.stats-bar{flex-wrap:wrap}.teacher-controls{flex-direction:column}.teacher-actions{flex-wrap:wrap}.btn-export{flex:1;text-align:center}}:root{--color-primary: #4F46E5;--color-primary-light: #6366F1;--color-on-primary: #FFFFFF;--color-secondary: #818CF8;--color-accent: #EA580C;--color-accent-light: #F97316;--color-background: #EEF2FF;--color-foreground: #1E1B4B;--color-muted: #EBEEF8;--color-border: #C7D2FE;--color-destructive: #DC2626;--color-success: #16A34A;--color-card-shadow: 0 8px 30px rgba(79, 70, 229, .12);--color-card-shadow-hover: 0 12px 40px rgba(79, 70, 229, .2);--font-heading: "Baloo 2", "Tajawal", sans-serif;--font-body: "Tajawal", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--color-background);color:var(--color-foreground);min-height:100vh;direction:rtl;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.3}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0)}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-200px) rotate(720deg);opacity:0}}.fade-up{animation:fadeUp .6s ease forwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}