html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}:root{--primary-blue: #1976d2;--light-blue: #42a5f5;--dark-blue: #0d47a1;--accent-blue: #2196f3;--background-light: #f5f9ff;--white: #ffffff;--text-dark: #1a1a1a;--text-light: #666666;--success-green: #4caf50;--error-red: #f44336;--warning-orange: #ff9800;--shadow: rgba(25, 118, 210, .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,var(--background-light) 0%,#e3f2fd 100%);color:var(--text-dark);line-height:1.6;min-height:100vh}#root{max-width:100%;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--accent-blue) 100%);color:#fff;padding:1rem 2rem;box-shadow:0 4px 20px var(--shadow);position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.8rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.progress-bar{flex:1;max-width:300px;margin:0 2rem;height:8px;background:#fff3;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--success-green);border-radius:4px;transition:width .3s ease}.hearts{display:flex;gap:.25rem;align-items:center}.heart{color:var(--error-red);font-size:1.2rem}.heart.empty{opacity:.3}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.lessons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.lesson-card{background:var(--white);border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px var(--shadow);border:2px solid transparent;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px var(--shadow);border-color:var(--light-blue)}.lesson-card.completed{border-color:var(--success-green)}.lesson-card.completed:after{content:"✓";position:absolute;top:1rem;right:1rem;background:var(--success-green);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.lesson-title{font-size:1.25rem;font-weight:600;color:var(--primary-blue);margin-bottom:.5rem}.lesson-description{color:var(--text-light);margin-bottom:1rem;line-height:1.5}.lesson-progress{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.progress-text{font-size:.9rem;color:var(--text-light)}.lesson-progress-bar{height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;margin:.5rem 0}.lesson-progress-fill{height:100%;background:var(--accent-blue);border-radius:3px;transition:width .3s ease}.start-lesson-btn{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--accent-blue) 100%);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.start-lesson-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px var(--shadow)}.start-lesson-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.quiz-container{background:var(--white);border-radius:16px;padding:2rem;box-shadow:0 4px 20px var(--shadow);max-width:800px;margin:0 auto}.question-counter{text-align:center;color:var(--text-light);margin-bottom:1rem;font-size:.9rem}.question{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:2rem;color:var(--text-dark);line-height:1.4}.answers-grid{display:grid;gap:1rem;margin-bottom:2rem}.answer-btn{background:var(--white);border:2px solid #e0e0e0;border-radius:12px;padding:1rem 1.5rem;text-align:left;cursor:pointer;transition:all .3s ease;font-size:1rem;font-weight:500;min-height:60px;display:flex;align-items:center}.answer-btn:hover{border-color:var(--light-blue);background:#42a5f50d;transform:translateY(-2px);box-shadow:0 4px 15px var(--shadow)}.answer-btn.selected{border-color:var(--primary-blue);background:#1976d21a}.answer-btn.correct{border-color:var(--success-green);background:#4caf501a}.answer-btn.incorrect{border-color:var(--error-red);background:#f443361a}.submit-btn{background:linear-gradient(135deg,var(--success-green) 0%,#66bb6a 100%);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s ease;width:100%;margin-top:1rem}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4caf504d}.submit-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.loading{display:flex;justify-content:center;align-items:center;height:200px;font-size:1.1rem;color:var(--text-light)}.error{background:#f443361a;border:1px solid var(--error-red);border-radius:8px;padding:1rem;margin:1rem 0;color:var(--error-red);text-align:center}@media (max-width: 768px){.app-header{padding:1rem}.header-content{flex-direction:column;gap:1rem}.progress-bar{max-width:100%;margin:0}.app-main{padding:1rem}.lessons-grid{grid-template-columns:1fr;gap:1rem}.quiz-container{padding:1.5rem}.question{font-size:1.3rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse{animation:pulse 2s infinite}.mode-selection-btn:hover{transform:translateY(-4px);box-shadow:0 8px 30px var(--shadow)}