:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #6b7280;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--background-color: #f9fafb;--surface-color: #ffffff;--text-primary: #111827;--text-secondary: #6b7280;--border-radius: 8px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--background-color);color:var(--text-primary);line-height:1.5;min-height:100vh}#app{max-width:600px;margin:0 auto;padding:var(--spacing-md);min-height:100vh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.start-screen{justify-content:center;align-items:center;text-align:center}.screen-header{margin-bottom:var(--spacing-xl)}.title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.subtitle{font-size:1.125rem;color:var(--text-secondary)}.start-info{margin-bottom:var(--spacing-xl);max-width:400px}.start-info-text{font-size:.9rem;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--spacing-sm)}.start-info-details{font-size:.85rem;color:var(--text-secondary);opacity:.8;line-height:1.5}.screen-content{margin-bottom:var(--spacing-xl)}.label{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.quiz-type-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:300px}.quiz-type-button{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);min-height:44px;background-color:var(--surface-color);border:2px solid transparent;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.quiz-type-button:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.button-label{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.button-description,.footer-text{font-size:.875rem;color:var(--text-secondary)}.quiz-screen{justify-content:flex-start}.progress-container{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.progress-bar{flex:1;height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:var(--primary-color);transition:width .3s ease}.progress-text{font-size:.875rem;color:var(--text-secondary);white-space:nowrap}.question-card{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm)}.question-header{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;border-radius:4px}.badge-vocabulary{background-color:#dbeafe;color:#1e40af}.badge-grammar{background-color:#fce7f3;color:#9d174d}.badge-difficulty{background-color:#f3f4f6;color:var(--text-secondary)}.badge-topic{background-color:#d1fae5;color:#065f46}.question-text{font-size:1.125rem;color:var(--text-primary);line-height:1.6}.options-wrapper{margin-bottom:var(--spacing-lg)}.options-container{display:flex;flex-direction:column;gap:var(--spacing-sm)}.option-button{display:flex;align-items:center;gap:var(--spacing-md);width:100%;padding:var(--spacing-md);min-height:44px;background-color:var(--surface-color);border:2px solid #e5e7eb;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;text-align:left}.option-button:hover:not(:disabled){border-color:var(--primary-color);background-color:#f8fafc}.option-button.selected{border-color:var(--primary-color);background-color:#eff6ff}.option-button.correct{border-color:var(--success-color);background-color:#d1fae5}.option-button.incorrect{border-color:var(--error-color);background-color:#fee2e2}.option-button:disabled{cursor:not-allowed;opacity:.7}.option-letter{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#f3f4f6;border-radius:50%;font-weight:600;color:var(--text-secondary)}.option-text{flex:1;font-size:1rem;color:var(--text-primary)}.result-screen{justify-content:center;align-items:center;text-align:center}.result-header{margin-bottom:var(--spacing-xl)}.score-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.score-value{display:flex;align-items:baseline;justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.score-number{font-size:4rem;font-weight:700;color:var(--primary-color)}.score-separator,.score-total{font-size:2rem;color:var(--text-secondary)}.score-percentage{font-size:1.25rem;color:var(--text-secondary)}.level-card{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm);width:100%;max-width:400px}.level-label{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;margin-bottom:var(--spacing-sm)}.level-value{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.level-description{font-size:1rem;color:var(--text-secondary);line-height:1.6}.level-disclaimer{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-sm);opacity:.8}.result-actions{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:300px}.review-button,.restart-button{width:100%;padding:var(--spacing-md);min-height:44px;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.review-button{background-color:var(--surface-color);border:2px solid var(--primary-color);color:var(--primary-color)}.review-button:hover{background-color:#eff6ff}.restart-button{background-color:var(--primary-color);color:#fff}.restart-button:hover{background-color:var(--primary-hover)}.skill-breakdown{width:100%;max-width:300px;margin-bottom:var(--spacing-xl)}.skill-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0;border-bottom:1px solid #e5e7eb}.skill-label{font-size:.95rem;color:var(--text-primary)}.skill-score{font-size:.95rem;font-weight:600;color:var(--primary-color)}.skill-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-sm)}.feedback-section{text-align:center;margin-top:var(--spacing-xl);max-width:300px}.feedback-text{font-size:.8rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);line-height:1.4}.feedback-link{font-size:.85rem;color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}.feedback-link:hover{color:var(--primary-color)}.feedback-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:2px}.review-screen{justify-content:flex-start}.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.review-title{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.back-button{padding:var(--spacing-sm) var(--spacing-md);min-height:44px;background-color:var(--surface-color);border:1px solid #e5e7eb;border-radius:var(--border-radius);font-size:.875rem;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.back-button:hover{background-color:#f9fafb}.review-meta{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.answers-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.answer-item{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);border-left:4px solid}.answer-item.correct{border-left-color:var(--success-color)}.answer-item.incorrect{border-left-color:var(--error-color)}.question-number{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background-color:#f3f4f6;border-radius:4px;font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.answer-item .question-text{font-size:1rem;margin-bottom:var(--spacing-md)}.selected-answer,.correct-answer{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.selected-answer strong,.correct-answer strong{color:var(--text-primary)}.explanation{font-size:.875rem;color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid #e5e7eb}.error-screen{justify-content:center;align-items:center;text-align:center}.error-icon{font-size:4rem;margin-bottom:var(--spacing-lg)}.error-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.error-message{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--spacing-xl);max-width:400px;line-height:1.6}.hidden{display:none!important}.option-button:focus-visible,.quiz-type-button:focus-visible,.restart-button:focus-visible,.review-button:focus-visible,.back-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){.screen{animation:none}}@media (max-width: 480px){#app{padding:var(--spacing-sm)}.title{font-size:2rem}.subtitle{font-size:1rem}.score-number{font-size:3rem}.score-separator,.score-total{font-size:1.5rem}.option-button,.quiz-type-button{min-height:48px}}