.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-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{font-style:italic;font-weight:600;opacity:.75}.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.4fr .8fr auto 1fr;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-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)}@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}.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}}: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}