.app-layout{display:flex;min-height:100vh}.sidebar{width:240px;background:#fff;display:flex;flex-direction:column;border-right:1px solid #eee;position:fixed;top:0;left:0;bottom:0;z-index:100}.sidebar-header{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;border-bottom:1px solid #eee;flex-wrap:wrap}.sidebar-subtitle{width:100%;font-size:.65rem;color:#999;margin-top:-.85rem;padding-left:2.75rem;letter-spacing:.02em}.sidebar-logo{width:32px;height:32px;object-fit:contain}.sidebar-title{font-size:1.25rem;font-weight:800;color:var(--color-primary)}.sidebar-nav{flex:1;padding:.75rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border-radius:12px;text-decoration:none;color:var(--color-text);font-weight:600;font-size:.9rem;transition:background .15s,color .15s}.nav-item:hover{background:#f5f5f5}.nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}.nav-icon{font-size:1.15rem;width:24px;text-align:center}.sidebar-footer{padding:1rem;border-top:1px solid #eee;display:flex;align-items:center;gap:.5rem}.sidebar-user{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.sidebar-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#81c784);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0}.sidebar-user-info{display:flex;flex-direction:column;min-width:0}.sidebar-user-name{font-weight:700;font-size:.85rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-email{font-size:.7rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-logout{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:.35rem;border-radius:8px;transition:background .15s}.btn-logout:hover{background:#ffeaea}.main-content{flex:1;margin-left:240px;background:#f8f9fa;min-height:100vh}@media(max-width:768px){.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:auto;flex-direction:row;border-right:none;border-top:1px solid #eee;z-index:100}.sidebar-header,.sidebar-footer{display:none}.sidebar-nav{flex-direction:row;padding:.5rem;gap:0;overflow-x:auto;justify-content:space-around}.nav-item{flex-direction:column;gap:.15rem;padding:.5rem;font-size:.65rem;min-width:0}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px;text-align:center}.main-content{margin-left:0;padding-bottom:80px}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f5e9,#fff3e0,#e3f2fd);padding:1rem}.auth-card{background:#fff;border-radius:24px;padding:2.5rem;width:100%;max-width:440px;box-shadow:0 20px 60px #00000014}.auth-header{text-align:center;margin-bottom:2rem}.auth-logo{font-size:3rem;margin-bottom:.5rem}.auth-header h1{font-size:1.75rem;font-weight:800;color:var(--color-text);margin:0 0 .25rem}.auth-header p{color:var(--color-text-secondary);margin:0;font-size:.95rem}.auth-error{background:#ffeaea;color:#d32f2f;padding:.75rem 1rem;border-radius:12px;margin-bottom:1rem;font-size:.9rem;font-weight:600}.auth-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.35rem;flex:1}.form-group label{font-weight:700;font-size:.85rem;color:var(--color-text)}.required{color:var(--color-danger, #f44336);font-weight:800}.form-group input{padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;font-family:inherit;transition:border-color .2s;outline:none}.form-group input:focus{border-color:var(--color-primary)}.form-row{display:flex;gap:.75rem}.otp-input{text-align:center;font-size:1.5rem!important;letter-spacing:.5rem;font-weight:700}.otp-notice{background:#e3f2fd;padding:.75rem 1rem;border-radius:12px;text-align:center;font-size:.9rem}.otp-notice.success{background:#e8f5e9}.otp-notice p{margin:0}.auth-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--color-text-secondary);font-size:.85rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#e0e0e0}.auth-footer{text-align:center;margin-top:1.5rem;font-size:.9rem;color:var(--color-text-secondary)}.auth-footer a{color:var(--color-primary);font-weight:700;text-decoration:none}.auth-footer a:hover{text-decoration:underline}.steps-indicator{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}.steps-indicator .step{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:#bbb;transition:color .2s}.steps-indicator .step span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#e0e0e0;color:#999;font-size:.75rem;font-weight:800;transition:background .2s,color .2s}.steps-indicator .step.active{color:var(--color-primary)}.steps-indicator .step.active span{background:var(--color-primary);color:#fff}.steps-indicator .step.done{color:var(--color-success)}.steps-indicator .step.done span{background:var(--color-success);color:#fff}.portal-page{padding:1.5rem;max-width:1000px;margin:0 auto}.welcome-banner{background:linear-gradient(135deg,#4caf50,#81c784);color:#fff;border-radius:20px;padding:2rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;box-shadow:0 8px 24px #4caf504d}.welcome-text h1{font-size:1.75rem;margin:0 0 .25rem}.welcome-text p{margin:0;opacity:.9;font-size:1.05rem}.streak-badge{display:flex;align-items:center;gap:.5rem;background:#fff3;padding:.5rem 1rem;border-radius:12px;font-weight:700}.streak-icon{font-size:1.5rem}.section{margin-bottom:2rem}.section-title{font-size:1.25rem;font-weight:800;margin:0 0 1rem;color:var(--color-text)}.progress-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.progress-card{background:#fff;border-radius:16px;padding:1.25rem;border-left:4px solid;box-shadow:0 2px 8px #0000000f;transition:transform .2s,box-shadow .2s}.progress-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.progress-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.progress-icon{font-size:1.25rem}.progress-subject{font-weight:700;font-size:.9rem;color:var(--color-text)}.progress-lesson{font-size:.85rem;color:var(--color-text-secondary);margin:0 0 .75rem}.progress-bar-track{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-bottom:.35rem}.progress-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}.progress-percent{font-size:.75rem;font-weight:700;color:var(--color-text-secondary)}.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.subject-card{background:#fff;border-radius:20px;padding:1.5rem;text-decoration:none;text-align:center;box-shadow:0 2px 8px #0000000f;transition:transform .2s,box-shadow .2s;border-bottom:4px solid var(--card-color)}.subject-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.subject-icon{font-size:2.5rem;margin-bottom:.5rem}.subject-card h3{font-size:1rem;font-weight:800;color:var(--color-text);margin:0 0 .25rem}.subject-card p{font-size:.8rem;color:var(--color-text-secondary);margin:0}.achievements-row{display:flex;gap:1rem;flex-wrap:wrap}.achievement{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:#fff;padding:1rem;border-radius:16px;min-width:80px;box-shadow:0 2px 8px #0000000f;font-size:.8rem;font-weight:700;color:var(--color-text)}.achievement.locked{opacity:.4}.achievement-badge{font-size:2rem}.back-link{display:inline-block;color:var(--color-primary);text-decoration:none;font-weight:700;margin-bottom:1rem;font-size:.9rem}.back-link:hover{text-decoration:underline}.subject-header{background:#fff;border-radius:20px;padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000000f;border-left:6px solid var(--subject-color)}.subject-header-icon{font-size:3rem}.subject-header h1{margin:0;font-size:1.5rem}.subject-header p{margin:.25rem 0 0;color:var(--color-text-secondary);font-size:.9rem}.subject-progress-ring{margin-left:auto;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--subject-color) calc(var(--progress, 0) * 1%),#eee 0);display:flex;align-items:center;justify-content:center}.subject-progress-ring span{background:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}.lessons-list{display:flex;flex-direction:column;gap:.75rem}.lesson-card{background:#fff;border-radius:16px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 8px #0000000f;transition:transform .2s}.lesson-card:hover{transform:translate(4px)}.lesson-card.locked{opacity:.5}.lesson-card.playable{text-decoration:none;color:inherit;cursor:pointer;border:2px solid var(--card-color)}.lesson-card.playable:hover{transform:translate(4px);box-shadow:0 6px 18px #0000001a}.lesson-play-badge{padding:.3rem .75rem;border-radius:999px;background:var(--card-color, #FF9800);color:#fff;font-size:.8rem;font-weight:800;white-space:nowrap}.lesson-number{width:36px;height:36px;border-radius:50%;background:var(--card-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}.lesson-card.locked .lesson-number{background:#ccc}.lesson-info{flex:1}.lesson-info h3{margin:0 0 .25rem;font-size:.95rem;font-weight:700}.lesson-meta{display:flex;gap:.5rem;align-items:center}.difficulty-badge{color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:6px}.lesson-duration{font-size:.8rem;color:var(--color-text-secondary)}.lesson-status{font-size:1.25rem}.empty-state{text-align:center;padding:3rem 1rem}.empty-icon{font-size:4rem;display:block;margin-bottom:1rem}.empty-state h2{margin:0 0 .5rem}.empty-state p{color:var(--color-text-secondary);margin:0 0 1.5rem}.page-header{margin-bottom:1.5rem}.page-header h1{margin:0 0 .25rem;font-size:1.5rem}.page-header p{margin:0;color:var(--color-text-secondary)}.records-list{display:flex;flex-direction:column;gap:1rem}.record-card{background:#fff;border-radius:16px;padding:1.25rem;box-shadow:0 2px 8px #0000000f}.record-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.record-header h3{margin:0;font-size:1.1rem}.status-badge{color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:8px}.record-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.record-field{display:flex;flex-direction:column;gap:.15rem}.field-label{font-size:.8rem;color:var(--color-text-secondary);font-weight:600}.verification-badge{font-weight:700}.profile-card{background:#fff;border-radius:24px;padding:2.5rem;text-align:center;box-shadow:0 2px 8px #0000000f;margin-bottom:1.5rem}.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#81c784);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:800;margin:0 auto 1rem}.profile-card h1{margin:0 0 .25rem;font-size:1.5rem}.profile-email{color:var(--color-text-secondary);margin:0 0 .25rem}.profile-method{font-size:.8rem;background:#e3f2fd;color:#1565c0;padding:.2rem .6rem;border-radius:8px;font-weight:600}.profile-message{margin:1rem 0;padding:.75rem;border-radius:12px;font-weight:600;font-size:.9rem}.profile-message.success{background:#e8f5e9;color:#2e7d32}.profile-message.error{background:#ffeaea;color:#d32f2f}.profile-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem}.profile-form{text-align:left;margin-top:1.5rem}.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.stat-card{background:#fff;border-radius:16px;padding:1.25rem;text-align:center;box-shadow:0 2px 8px #0000000f;display:flex;flex-direction:column;gap:.25rem}.stat-icon{font-size:1.75rem}.stat-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)}.stat-label{font-size:.8rem;color:var(--color-text-secondary);font-weight:600}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:1rem}.loading-spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){.welcome-banner{flex-direction:column;text-align:center;gap:1rem}.subjects-grid{grid-template-columns:repeat(2,1fr)}.progress-cards{grid-template-columns:1fr}.profile-actions,.form-row{flex-direction:column}}.math-quiz-page{padding:1.5rem;max-width:800px;margin:0 auto}.quiz-hero{text-align:center;margin-bottom:1.5rem}.quiz-hero h1{font-size:2rem;margin:0 0 .25rem;background:linear-gradient(135deg,#9c27b0,#2196f3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.quiz-hero p{color:var(--color-text-secondary);margin:0}.quiz-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}.quiz-tab{display:flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border:2px solid #e0e0e0;border-radius:12px;background:#fff;font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;color:var(--color-text)}.quiz-tab:hover{border-color:#9c27b0;background:#f3e5f5}.quiz-tab.active{background:linear-gradient(135deg,#9c27b0,#7b1fa2);color:#fff;border-color:transparent}.tab-icon{font-size:1rem}.score-banner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.5rem;border-radius:16px;margin-bottom:1.5rem;position:relative;overflow:hidden;flex-wrap:wrap}.score-banner.great{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#2e7d32}.score-banner.good{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}.score-banner.retry{background:linear-gradient(135deg,#fce4ec,#f8bbd0);color:#c62828}.score-emoji{font-size:1.25rem}.score-text{font-size:1.1rem;font-weight:700}.score-text strong{font-size:1.5rem}.score-saving,.score-time{font-style:normal;font-weight:600;opacity:.8}.quiz-history{margin-top:2rem;padding:1.5rem;background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000000d}.quiz-history h2{margin:0 0 1rem;font-size:1.25rem;font-weight:800;color:var(--color-text)}.history-list{display:flex;flex-direction:column;gap:.5rem}.history-row{display:grid;grid-template-columns:1.2fr .6fr .7fr auto 1.5fr;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:12px;background:#f7f7f9}.history-category{font-weight:700;color:var(--color-text)}.history-score{font-weight:700;color:var(--color-text-secondary)}.history-time{font-weight:600;font-size:.85rem;color:var(--color-text-secondary)}.history-badge{justify-self:start;padding:.2rem .6rem;border-radius:999px;font-size:.85rem;font-weight:800}.history-badge.great{background:#c8e6c9;color:#2e7d32}.history-badge.good{background:#ffe0b2;color:#e65100}.history-badge.retry{background:#f8bbd0;color:#c62828}.history-date{justify-self:end;font-size:.85rem;color:var(--color-text-secondary);white-space:nowrap}@media(max-width:600px){.history-row{grid-template-columns:1fr auto;row-gap:.35rem}.history-date{justify-self:start}}.btn-sm{padding:.4rem .75rem;font-size:.8rem;border-radius:10px}.confetti-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#FFD700 1px,transparent 1px),radial-gradient(circle,#FF6B6B 1px,transparent 1px),radial-gradient(circle,#4CAF50 1px,transparent 1px),radial-gradient(circle,#2196F3 1px,transparent 1px);background-size:40px 40px,60px 60px,50px 50px,70px 70px;background-position:0 0,20px 10px,10px 30px,30px 5px;animation:confetti-fall 2s ease-out forwards;opacity:.4}@keyframes confetti-fall{0%{transform:translateY(-100%);opacity:.6}to{transform:translateY(100%);opacity:0}}.quiz-progress{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.quiz-progress-bar{flex:1;height:10px;background:#e0e0e0;border-radius:5px;overflow:hidden}.quiz-progress-fill{height:100%;background:linear-gradient(90deg,#9c27b0,#2196f3);border-radius:5px;transition:width .3s ease}.quiz-progress-text{font-size:.8rem;font-weight:700;color:var(--color-text-secondary);white-space:nowrap}.quiz-progress-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}.quiz-timer{font-size:.9rem;font-weight:800;color:var(--color-primary);white-space:nowrap;font-variant-numeric:tabular-nums}.quiz-review{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem}.review-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.75rem;padding:.6rem 1rem;border-radius:12px;background:#f7f7f9;border-left:4px solid transparent}.review-row.correct{border-left-color:var(--color-success, #4CAF50)}.review-row.wrong{border-left-color:var(--color-danger, #f44336)}.review-q{font-weight:800;color:var(--color-text-secondary)}.review-prompt{font-weight:700;color:var(--color-text)}.review-result{font-weight:700;white-space:nowrap}.review-time{font-size:.85rem;font-weight:600;color:var(--color-text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}@media(max-width:600px){.review-row{grid-template-columns:auto 1fr;row-gap:.3rem}}.questions-container{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}.question-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 2px 12px #0000000f;border-left:5px solid #9C27B0;transition:border-color .3s}.question-card.correct{border-left-color:#4caf50;background:#f9fff9}.question-card.wrong{border-left-color:#f44336;background:#fff9f9}.question-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.question-number{background:#9c27b0;color:#fff;font-weight:800;font-size:.75rem;padding:.2rem .6rem;border-radius:8px}.question-card.correct .question-number{background:#4caf50}.question-card.wrong .question-number{background:#f44336}.question-operation{font-size:1.25rem;opacity:.5}.question-text{font-size:1.5rem;font-weight:800;text-align:center;margin:.5rem 0 1.25rem;color:var(--color-text)}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.option-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:14px;background:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;color:var(--color-text)}.option-btn:hover:not(:disabled){border-color:#9c27b0;background:#f9f0ff}.option-btn.selected{border-color:#9c27b0;background:#f3e5f5;color:#7b1fa2}.option-btn.correct-answer{border-color:#4caf50;background:#e8f5e9;color:#2e7d32}.option-btn.wrong-answer{border-color:#f44336;background:#ffebee;color:#c62828}.option-btn:disabled{cursor:default}.option-letter{width:28px;height:28px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex-shrink:0}.option-btn.selected .option-letter{background:#9c27b0;color:#fff}.option-btn.correct-answer .option-letter{background:#4caf50;color:#fff}.option-btn.wrong-answer .option-letter{background:#f44336;color:#fff}.option-value{flex:1;text-align:center}.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.page-dots{display:flex;gap:.35rem}.page-dot{width:32px;height:32px;border-radius:50%;border:2px solid #e0e0e0;background:#fff;font-family:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:all .15s;color:var(--color-text);display:flex;align-items:center;justify-content:center}.page-dot:hover{border-color:#9c27b0}.page-dot.active{background:#9c27b0;border-color:#9c27b0;color:#fff}@media(max-width:640px){.quiz-tabs{gap:.35rem}.quiz-tab{padding:.4rem .65rem;font-size:.75rem}.tab-label{display:none}.tab-icon{font-size:1.25rem}.options-grid{grid-template-columns:1fr}.question-text{font-size:1.25rem}.quiz-nav{flex-direction:column}}.letter-card{background:#fff;border-radius:24px;padding:2rem 1.5rem 2.5rem;box-shadow:0 8px 28px #0000000f;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.letter-emoji{font-size:4.5rem;line-height:1}.big-letter{font-size:5rem;font-weight:800;letter-spacing:.25rem;background:linear-gradient(135deg,#ff9800,#e91e63);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.letter-word{font-size:1.2rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:.5rem}.letter-word strong{color:var(--color-text)}.mic-btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 2rem;border:none;border-radius:999px;background:linear-gradient(135deg,#ff9800,#e91e63);color:#fff;font-family:inherit;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 8px 20px #e91e634d;transition:transform .15s ease,box-shadow .15s ease}.mic-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px #e91e6366}.mic-btn:disabled{cursor:default;opacity:.9}.mic-icon{font-size:1.5rem}.mic-btn.listening{background:linear-gradient(135deg,#f44336,#b71c1c);animation:mic-pulse 1s ease-in-out infinite}@keyframes mic-pulse{0%,to{box-shadow:0 0 #f4433680}50%{box-shadow:0 0 0 16px #f4433600}}.speech-feedback{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.75rem;border-radius:999px;font-size:1.15rem;font-weight:800;animation:pop-in .2s ease}.speech-feedback.correct{background:#e8f5e9;color:#2e7d32}.speech-feedback.wrong{background:#fce4ec;color:#c62828}.speech-feedback-icon{font-size:1.4rem}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.speech-hint{margin:.25rem 0 0;font-size:.95rem;font-weight:600;color:var(--color-text-secondary)}.tutorials-page{max-width:1100px}.tutorials-hero{background:linear-gradient(135deg,#3f51b5,#7986cb);color:#fff;border-radius:20px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 8px 24px #3f51b54d}.tutorials-hero h1{font-size:1.75rem;margin:0 0 .5rem}.tutorials-hero p{margin:0;opacity:.92;max-width:60ch}.tutorials-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.tutorial-stat{background:#fff3;padding:.4rem .9rem;border-radius:12px;font-size:.9rem}.tutorial-stat strong{font-size:1.05rem}.tutorials-page.subject-science .tutorials-hero{background:linear-gradient(135deg,#00695c,#26a69a);box-shadow:0 8px 24px #00695c4d}.tutorials-page.subject-language-arts .tutorials-hero{background:linear-gradient(135deg,#ad1457,#ec407a);box-shadow:0 8px 24px #ad14574d}.subject-picker{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}.subject-chip{display:flex;align-items:center;gap:.45rem;background:#fff;border:2px solid #e5e7eb;border-radius:999px;padding:.5rem 1.15rem;font-weight:800;font-size:.95rem}.subject-chip.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.subject-chip-icon{font-size:1.1rem}.grade-picker{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}.grade-chip{display:flex;align-items:center;gap:.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:.6rem 1rem;font-weight:700}.grade-chip.active{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary-dark)}.grade-chip.locked{opacity:.55}.grade-chip-icon{font-size:1.25rem}.grade-chip-tag{font-size:.7rem;font-weight:600;background:#e5e7eb;color:var(--color-text-secondary);padding:.15rem .5rem;border-radius:8px;text-transform:uppercase}.strand-section{margin-bottom:2rem}.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.unit-card{display:block;background:#fff;border-radius:16px;padding:1.25rem;text-decoration:none;color:inherit;border-left:5px solid var(--card-color, var(--color-primary));box-shadow:0 2px 8px #0000000f;transition:transform .15s ease,box-shadow .15s ease}.unit-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000001f}.unit-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.unit-icon{font-size:1.75rem}.unit-code{font-size:.75rem;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--card-color, var(--color-primary));padding:.2rem .55rem;border-radius:8px}.unit-card h3{margin:0 0 .35rem;font-size:1.05rem}.unit-card p{margin:0 0 .75rem;font-size:.88rem;color:var(--color-text-secondary);line-height:1.45}.unit-card-meta{display:flex;gap:.9rem;font-size:.78rem;color:var(--color-text-secondary);font-weight:600}.unit-header{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:18px;padding:1.5rem;margin-bottom:1.25rem;border-left:6px solid var(--card-color, var(--color-primary));box-shadow:0 2px 10px #0000000f}.unit-header-icon{font-size:2.75rem;line-height:1}.unit-header-text{flex:1;min-width:0}.unit-header-code{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--card-color, var(--color-primary))}.unit-header-text h1{font-size:1.45rem;margin:.15rem 0 .25rem}.unit-header-text p{margin:0;color:var(--color-text-secondary);font-size:.95rem}.unit-header-duration{font-size:.85rem;font-weight:700;color:var(--color-text-secondary);white-space:nowrap}.objectives-box{background:var(--color-primary-light);border-radius:16px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}.objectives-box h2{font-size:1rem;margin:0 0 .5rem;color:var(--color-primary-dark)}.objectives-box ul{margin:0;padding-left:1.2rem}.objectives-box li{font-size:.92rem;margin-bottom:.25rem}.tutorial-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tutorial-tab{display:flex;align-items:center;gap:.45rem;background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:.6rem 1.1rem;font-family:inherit;font-size:.92rem;font-weight:700;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.tutorial-tab:hover{border-color:var(--card-color, var(--color-primary))}.tutorial-tab.active{background:var(--card-color, var(--color-primary));border-color:var(--card-color, var(--color-primary));color:#fff}.study-sections{display:flex;flex-direction:column;gap:1rem}.study-card{background:#fff;border-radius:16px;padding:1.4rem;box-shadow:0 2px 8px #0000000f}.study-card h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:1.1rem}.study-number{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--card-color, var(--color-primary));color:#fff;font-size:.85rem;flex-shrink:0}.study-body{margin:0 0 .75rem;line-height:1.6}.study-points{margin:0;padding-left:1.2rem}.study-points li{margin-bottom:.35rem;line-height:1.5}.example-list{display:flex;flex-direction:column;gap:1rem}.example-card{background:#fff;border-radius:16px;padding:1.4rem;box-shadow:0 2px 8px #0000000f;border-top:4px solid var(--card-color, var(--color-primary))}.example-badge{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--card-color, var(--color-primary));padding:.2rem .6rem;border-radius:8px}.example-prompt{font-weight:700;font-size:1.02rem;margin:.75rem 0}.example-steps{margin:0 0 1rem;padding-left:1.3rem}.example-steps li{margin-bottom:.4rem;line-height:1.55;color:#374151}.example-answer{display:flex;align-items:center;gap:.75rem;background:var(--color-primary-light);border-radius:12px;padding:.7rem 1rem}.example-answer-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary-dark)}.test-paper-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.test-paper-head h2{margin:0;font-size:1.15rem}.test-paper-head p{margin:.2rem 0 0;font-size:.88rem;color:var(--color-text-secondary)}.test-progress{font-weight:700;font-size:.85rem;color:var(--color-text-secondary);background:#fff;border-radius:10px;padding:.4rem .8rem}.test-score{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-radius:16px;padding:1rem 1.25rem;margin-bottom:1.25rem;color:#fff}.test-score.great{background:linear-gradient(135deg,#4caf50,#81c784)}.test-score.good{background:linear-gradient(135deg,#ff9800,#ffb74d)}.test-score.retry{background:linear-gradient(135deg,#f44336,#e57373)}.test-score-emoji{font-size:1.75rem}.test-score-text{flex:1;font-size:1.05rem}.test-question{background:#fff;border-radius:16px;padding:1.25rem;margin-bottom:1rem;box-shadow:0 2px 8px #0000000f}.test-question-text{display:flex;gap:.6rem;align-items:baseline;font-weight:700;margin:0 0 .9rem;line-height:1.5}.test-question-number{color:var(--card-color, var(--color-primary));font-size:.85rem;flex-shrink:0}.test-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}.test-option{display:flex;align-items:center;gap:.6rem;background:#f8f9fa;border:2px solid #e5e7eb;border-radius:12px;padding:.7rem .9rem;font-family:inherit;font-size:.95rem;text-align:left;cursor:pointer;transition:all .12s ease}.test-option:hover:not(:disabled){border-color:var(--card-color, var(--color-primary))}.test-option:disabled{cursor:default}.test-option.chosen{border-color:var(--card-color, var(--color-primary));background:var(--color-primary-light)}.test-option.correct{border-color:var(--color-success);background:#e8f5e9}.test-option.wrong{border-color:var(--color-danger);background:#ffebee}.test-option-letter{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;border:2px solid #e5e7eb;font-size:.78rem;font-weight:800;flex-shrink:0}.test-option-value{flex:1}.test-mark{flex-shrink:0}.test-explanation{margin:.9rem 0 0;padding:.7rem .9rem;background:#fffde7;border-left:4px solid var(--color-warning);border-radius:8px;font-size:.9rem;line-height:1.5}.test-submit{width:100%;margin-top:.5rem;padding:.9rem;font-size:1rem}.test-submit:disabled{opacity:.55;cursor:not-allowed}.math-visual,.science-visual,.la-visual{margin:1rem auto;max-width:260px;text-align:center}.math-visual.wide,.science-visual.wide,.la-visual.wide{max-width:380px}.math-visual svg,.science-visual svg,.la-visual svg{width:100%;height:auto;display:block}.math-visual svg.clickable rect{cursor:pointer}.math-visual figcaption,.science-visual figcaption,.la-visual figcaption{margin-top:.5rem;font-size:.82rem;color:var(--color-text-secondary);font-style:italic}.story-intro{display:flex;gap:1rem;align-items:flex-start;background:linear-gradient(135deg,#fff8e1,#ffecb3);border-radius:18px;padding:1.25rem 1.5rem;margin-bottom:1.25rem}.story-hero{font-size:2.5rem;line-height:1}.story-intro h2{margin:0 0 .35rem;font-size:1.2rem}.story-intro p{margin:0;font-size:.95rem;line-height:1.55}.story-progress{display:flex;align-items:center;gap:.4rem;margin-bottom:1rem}.story-dot{width:12px;height:12px;border-radius:50%;border:2px solid #cfd8dc;background:#fff;padding:0;cursor:pointer}.story-dot.done{background:#a5d6a7;border-color:#a5d6a7}.story-dot.active{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.3)}.story-counter{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--color-text-secondary)}.story-scene{background:#fff;border-radius:18px;padding:1.5rem;box-shadow:0 2px 10px #0000000f}.story-text{margin:0;font-size:1.05rem;line-height:1.7}.story-question{background:#e3f2fd;border-radius:14px;padding:1rem 1.15rem;margin-top:1rem}.story-question-text{margin:0 0 .6rem;font-weight:700}.story-reveal{background:#fff;border-left:4px solid var(--color-primary);border-radius:8px;padding:.7rem .9rem;font-size:.95rem;line-height:1.55}.story-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}.story-end{font-weight:800;color:var(--color-primary-dark)}.story-outro{margin-top:1rem;background:var(--color-primary-light);border-radius:14px;padding:1rem 1.25rem;font-weight:600;line-height:1.6}.example-story{margin:.75rem 0 .25rem;font-size:.95rem;color:var(--color-text-secondary)}.reveal-btn{width:100%}.explore-tab{display:flex;flex-direction:column;gap:1.25rem}.explorer,.match-game{background:#fff;border-radius:18px;padding:1.5rem;box-shadow:0 2px 10px #0000000f}.explorer-head h3,.match-head h3{margin:0 0 .3rem;font-size:1.15rem}.explorer-head p{margin:0 0 1rem;font-size:.92rem;color:var(--color-text-secondary)}.explorer-body{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}.explorer-picture{flex:0 0 240px;max-width:240px}.explorer-readout{flex:1;min-width:240px}.readout-row{display:flex;align-items:baseline;justify-content:space-between;padding:.5rem .8rem;background:#f8f9fa;border-radius:10px;margin-bottom:.5rem}.readout-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.readout-value{font-size:1.35rem;color:var(--color-primary-dark)}.explorer-slider{width:100%;margin:.75rem 0;accent-color:var(--color-primary)}.explorer-benchmarks{display:flex;flex-wrap:wrap;gap:.4rem}.benchmark-btn{background:#f8f9fa;border:2px solid #e5e7eb;border-radius:10px;padding:.35rem .7rem;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}.benchmark-btn.active,.benchmark-btn:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.primary-frame{display:flex;justify-content:center}.primary-frame .math-visual{max-width:300px}.primary-controls{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin:.5rem 0 1rem}.big-btn{width:64px;height:64px;border-radius:50%;border:3px solid var(--color-primary);background:var(--color-primary-light);font-size:1.75rem;line-height:1;cursor:pointer;transition:transform .1s ease}.big-btn:hover:not(:disabled){transform:scale(1.08)}.big-btn:disabled{opacity:.35;cursor:not-allowed}.primary-count{font-size:2.75rem;font-weight:800;color:var(--color-primary-dark);min-width:3rem;text-align:center}.primary-readout{text-align:center;font-size:1.2rem;margin:0}.primary-readout strong{color:var(--color-primary-dark);font-size:1.5rem}.match-option.big{font-size:1.9rem;padding:1.1rem;font-weight:800}.match-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.match-scores{display:flex;gap:.5rem;font-size:.85rem;font-weight:700}.match-streak,.match-best{background:#fff8e1;border-radius:10px;padding:.25rem .6rem}.match-prompt{font-size:1.1rem;margin:.75rem 0 1rem}.match-prompt strong{font-size:1.4rem;color:var(--color-primary-dark)}.match-options{display:flex;flex-wrap:wrap;gap:.6rem}.match-option{flex:1 1 100px;background:#f8f9fa;border:2px solid #e5e7eb;border-radius:12px;padding:.8rem;font-family:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .12s ease}.match-option:hover:not(:disabled){border-color:var(--color-primary)}.match-option.correct{border-color:var(--color-success);background:#e8f5e9}.match-option.wrong{border-color:var(--color-danger);background:#ffebee}.match-feedback{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding:.8rem 1rem;border-radius:12px;font-weight:600}.match-feedback.correct{background:#e8f5e9}.match-feedback.wrong{background:#fff3e0}.unit-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}.unit-nav-link{background:#fff;border-radius:12px;padding:.7rem 1rem;text-decoration:none;color:var(--color-text);font-weight:700;font-size:.88rem;box-shadow:0 2px 8px #0000000f}.unit-nav-link:hover{color:var(--color-primary-dark)}.unit-nav-link.next{margin-left:auto}.unit-header-actions{display:flex;align-items:center;gap:.6rem}.sound-toggle{width:42px;height:42px;border-radius:50%;border:2px solid #e5e7eb;background:#fff;font-size:1.15rem;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.sound-toggle:hover{transform:scale(1.1);border-color:var(--color-primary)}.sound-toggle.muted{opacity:.6}.sound-controls{position:relative}.sound-panel{position:absolute;top:calc(100% + .5rem);right:0;z-index:20;width:250px;background:#fff;border-radius:14px;padding:.9rem 1rem;box-shadow:0 10px 30px #0000002e;border:1px solid #eceff1}.sound-panel-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}.sound-panel-title{font-weight:800;font-size:.9rem}.mute-switch{border:2px solid var(--color-primary);background:var(--color-primary-light);color:var(--color-primary-dark);border-radius:999px;padding:.25rem .7rem;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer}.mute-switch.off{border-color:#cfd8dc;background:#eceff1;color:var(--color-text-secondary)}.slider-row{margin-bottom:.8rem}.sound-panel-label{font-size:.78rem;font-weight:700;color:var(--color-text-secondary);white-space:nowrap}.slider-row input[type=range]{flex:1;accent-color:var(--color-primary);cursor:pointer}.sound-panel-value{font-size:.78rem;font-weight:800;color:var(--color-primary-dark);min-width:2.5rem;text-align:right}.sound-test{width:100%;border:2px solid #e5e7eb;background:#f8f9fa;border-radius:10px;padding:.45rem;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.sound-test:hover:not(:disabled){border-color:var(--color-primary)}.sound-test:disabled{opacity:.45;cursor:not-allowed}.speak-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--color-primary-light);border:2px solid transparent;border-radius:999px;padding:.3rem .75rem;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--color-primary-dark);cursor:pointer;vertical-align:middle;transition:border-color .15s ease,transform .15s ease}.speak-btn:hover{border-color:var(--color-primary);transform:scale(1.04)}.speak-btn.compact{margin-left:.5rem;flex-shrink:0}.speak-btn.speaking{background:#fff3e0;color:#e65100;animation:speak-pulse 1.1s ease-in-out infinite}.speak-icon{font-size:.95rem}@keyframes speak-pulse{0%,to{box-shadow:0 0 #ff980080}50%{box-shadow:0 0 0 8px #ff980000}}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes slide-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes float-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px) rotate(0)}to{opacity:0;transform:translateY(180px) rotate(320deg)}}.animate-in{animation:fade-up .45s ease both}.animate-scene{animation:slide-in .35s ease both}.pop-in{animation:pop .4s cubic-bezier(.34,1.56,.64,1) both}.step-in{animation:fade-up .3s ease both}.float{display:inline-block;animation:float-bob 2.6s ease-in-out infinite}.wiggle-hover:hover{animation:float-bob .6s ease-in-out infinite}.svg-pop{transform-box:fill-box;transform-origin:center;animation:pop .42s cubic-bezier(.34,1.56,.64,1) both}.clock-hand{transition:all .5s cubic-bezier(.34,1.4,.64,1)}.test-option.chosen,.match-option.correct,.test-option.correct{animation:pop .3s ease both}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:16px}.confetti-bit{position:absolute;top:0;font-size:1.25rem;animation:confetti-fall 1.8s ease-in forwards}.test-score{position:relative;overflow:hidden}@media(prefers-reduced-motion:reduce){.animate-in,.animate-scene,.pop-in,.step-in,.float,.svg-pop,.confetti-bit,.speak-btn.speaking,.wiggle-hover:hover{animation:none!important}.clock-hand{transition:none}}@media(max-width:640px){.unit-header{flex-direction:column;align-items:flex-start}.test-options{grid-template-columns:1fr}}:root{--color-primary: #4CAF50;--color-primary-light: #e8f5e9;--color-primary-dark: #2e7d32;--color-success: #4CAF50;--color-warning: #FF9800;--color-danger: #f44336;--color-info: #2196F3;--color-text: #1a1a2e;--color-text-secondary: #6b7280;--color-bg: #f8f9fa;--font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-family);font-size:16px;line-height:1.5;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.2}a{color:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:2px solid transparent;border-radius:12px;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;text-align:center}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.btn-outline{background:transparent;color:var(--color-text);border-color:#e0e0e0}.btn-outline:hover:not(:disabled){background:#f5f5f5;border-color:#ccc}.btn-danger{color:var(--color-danger);border-color:#ffcdd2}.btn-danger:hover:not(:disabled){background:#ffeaea}.btn-text{background:transparent;color:var(--color-text-secondary);border:none;padding:.5rem 1rem}.btn-text:hover:not(:disabled){color:var(--color-text)}.btn-full{width:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#aaa}