*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}button{font-family:inherit}button:focus,button:focus-visible{outline:2px solid #667eea;outline-offset:2px}.flashcard-container{width:100%;max-width:800px;margin:0 auto;padding:20px}.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-indicator{color:#666;font-weight:500;font-size:16px}.flashcard{perspective:1000px;cursor:pointer;margin-bottom:30px;min-height:400px}.flashcard-inner{position:relative;width:100%;height:100%;min-height:400px;text-align:center;transition:transform .6s;transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;background:#fff;border-radius:16px;box-shadow:0 8px 24px #0000001f;display:flex;align-items:center;justify-content:center;padding:40px}.flashcard-back{transform:rotateY(180deg);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.card-content{width:100%}.card-content h3{margin:0 0 20px;font-size:20px;color:#333}.flashcard-back .card-content h3,.flashcard-back .card-content h4{color:#fff}.question-text,.answer-text{font-size:18px;line-height:1.6;margin:20px 0}.answer-text{font-weight:600;font-size:20px;margin-bottom:30px}.explanation{text-align:left;margin-top:30px;padding:20px;background:#ffffff1a;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.explanation h4{margin:0 0 10px;font-size:16px}.explanation p{margin:0;line-height:1.6;font-size:14px}.flip-hint{margin-top:30px;font-size:14px;color:#999;font-style:italic}.flashcard-back .flip-hint{color:#ffffffb3}.flashcard-controls{display:flex;gap:20px;justify-content:center;margin-top:20px}.nav-button{padding:12px 32px;font-size:16px;font-weight:500;border:none;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s ease}.nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.nav-button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.flashcard-container{padding:10px}.flashcard-front,.flashcard-back{padding:20px}.question-text,.answer-text{font-size:16px}.section-badge{font-size:12px;padding:6px 12px}}.quiz-container{width:100%;max-width:900px;margin:0 auto;padding:20px}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.quiz-card{background:#fff;border-radius:16px;box-shadow:0 8px 24px #0000001f;padding:40px}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.question-number{font-size:14px;font-weight:600;color:#667eea;text-transform:uppercase;letter-spacing:.5px}.topic-label{font-size:13px;color:#666;font-style:italic}.question-text{font-size:22px;line-height:1.5;color:#333;margin:0 0 30px;font-weight:600}.options-container{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}.option-button{display:flex;align-items:center;gap:16px;padding:16px 20px;border:2px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;text-align:left;font-size:16px;position:relative}.option-button:hover:not(:disabled){border-color:#667eea;background:#f8f9ff;transform:translate(4px)}.option-button.selected{border-color:#667eea;background:#f0f3ff;font-weight:500}.option-button.correct{border-color:#4caf50;background:#e8f5e9;font-weight:500}.option-button.incorrect{border-color:#f44336;background:#ffebee;font-weight:500}.option-button.disabled{opacity:.6;cursor:not-allowed}.option-button:disabled{cursor:not-allowed}.option-letter{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#f0f0f0;font-weight:600;color:#666;flex-shrink:0}.option-button.selected .option-letter{background:#667eea;color:#fff}.option-button.correct .option-letter{background:#4caf50;color:#fff}.option-button.incorrect .option-letter{background:#f44336;color:#fff}.option-text{flex:1;line-height:1.5}.check-mark,.x-mark{font-size:24px;font-weight:700;margin-left:auto}.check-mark{color:#4caf50}.x-mark{color:#f44336}.feedback{margin:30px 0;padding:24px;border-radius:12px;animation:slideDown .4s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.correct-feedback{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #4caf50}.incorrect-feedback{background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #f44336}.feedback h3{margin:0 0 12px;font-size:20px}.correct-feedback h3{color:#2e7d32}.incorrect-feedback h3{color:#c62828}.correct-answer{margin:12px 0;font-size:16px;color:#c62828}.explanation-box{margin-top:16px;padding:16px;background:#fff;border-radius:8px}.explanation-box h4{margin:0 0 8px;font-size:16px;color:#333}.explanation-box p{margin:0;line-height:1.6;color:#555;font-size:15px}.quiz-controls{display:flex;gap:16px;justify-content:space-between;margin-top:30px}.nav-button,.submit-button{padding:12px 32px;font-size:16px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.nav-button.primary,.submit-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.nav-button.secondary{background:#f0f0f0;color:#666}.nav-button:hover:not(:disabled),.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.nav-button:disabled,.submit-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(max-width:768px){.quiz-container{padding:10px}.quiz-card{padding:24px}.question-text{font-size:18px}.option-button{padding:12px 16px;font-size:15px}.quiz-controls{flex-direction:column}.nav-button,.submit-button{width:100%}}.progress-tracker{background:#fff;border-radius:16px;box-shadow:0 8px 24px #0000001f;padding:30px;margin-bottom:30px}.progress-tracker h3{margin:0 0 20px;font-size:20px;color:#333;text-align:center}.progress-bar-container{margin-bottom:24px}.progress-bar{width:100%;height:32px;background:#f0f0f0;border-radius:16px;overflow:hidden;display:flex;margin-bottom:8px}.progress-fill{height:100%;transition:width .5s ease}.progress-fill.correct{background:linear-gradient(90deg,#4caf50,#81c784)}.progress-fill.incorrect{background:linear-gradient(90deg,#f44336,#e57373)}.progress-percentage{display:block;text-align:center;font-size:14px;color:#666;font-weight:500}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;padding:20px;text-align:center}.stat-card.correct-stat{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.stat-card.incorrect-stat{background:linear-gradient(135deg,#ffebee,#ffcdd2)}.stat-value{font-size:32px;font-weight:700;color:#333;margin-bottom:8px}.stat-label{font-size:13px;color:#666;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.accuracy-display{text-align:center;padding:24px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff}.accuracy-label{font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;opacity:.9}.accuracy-value{font-size:48px;font-weight:700;margin-bottom:12px}.accuracy-value.passing{color:#4caf50;text-shadow:0 2px 8px rgba(76,175,80,.3)}.accuracy-value.needs-improvement{color:#ff9800;text-shadow:0 2px 8px rgba(255,152,0,.3)}.accuracy-message{font-size:14px;margin-top:8px;font-weight:500;padding:8px 16px;border-radius:20px;display:inline-block}.accuracy-message.success{background:#4caf5033}.accuracy-message.warning{background:#ff980033}@media(max-width:768px){.progress-tracker{padding:20px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:24px}.accuracy-value{font-size:36px}}.filter-panel{background:#fff;border-radius:16px;box-shadow:0 8px 24px #0000001f;padding:24px;margin-bottom:30px}.filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.filter-panel h3{margin:0;font-size:18px;color:#333}.shuffle-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500;color:#667eea;-webkit-user-select:none;user-select:none}.shuffle-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.shuffle-toggle:hover{color:#764ba2}.filter-buttons{display:flex;flex-direction:column;gap:10px}.filter-button{padding:12px 20px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .3s ease;text-align:left;font-size:14px;font-weight:500;color:#333}.filter-button:hover{border-color:#667eea;background:#f8f9ff;transform:translate(4px)}.filter-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;font-weight:600}@media(max-width:768px){.filter-panel{padding:16px}.filter-button{font-size:13px;padding:10px 16px}}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.app-header{background:#fffffffa;padding:40px 20px;box-shadow:0 4px 20px #0000001a;text-align:center}.header-content h1{margin:0 0 12px;font-size:32px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.subtitle{margin:0;font-size:16px;color:#666}.app-main{flex:1;padding:40px 20px}.container{max-width:1200px;margin:0 auto}.mode-selector{display:flex;gap:16px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.mode-button{padding:16px 32px;font-size:18px;font-weight:600;border:3px solid white;border-radius:12px;background:#fff;color:#667eea;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.mode-button:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0003}.mode-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.reset-container{text-align:center;margin-bottom:20px}.reset-button{padding:10px 24px;font-size:14px;font-weight:500;border:2px solid #f44336;border-radius:8px;background:#fff;color:#f44336;cursor:pointer;transition:all .3s ease}.reset-button:hover{background:#f44336;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #f443364d}.content-area{margin-top:20px}.no-questions{background:#fff;border-radius:16px;padding:60px 40px;text-align:center;box-shadow:0 8px 24px #0000001f}.no-questions p{margin:0;font-size:18px;color:#666}.app-footer{background:#fffffffa;padding:30px 20px;text-align:center;box-shadow:0 -4px 20px #0000001a}.app-footer p{margin:8px 0;color:#333;font-size:14px}.footer-note{color:#666;font-size:13px}@media(max-width:768px){.header-content h1{font-size:24px}.subtitle{font-size:14px}.app-main{padding:20px 10px}.mode-button{font-size:16px;padding:12px 24px}}