: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}@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:flex-start;align-items:center;text-align:center;padding-top:var(--spacing-lg)}.result-card-main{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm);width:100%;max-width:400px}.result-level-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-sm)}.result-level-value{font-size:1.75rem;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.result-level-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--spacing-lg)}.result-score-row{display:flex;align-items:baseline;justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.result-score-big{font-size:3rem;font-weight:700;color:var(--primary-color)}.result-score-sep,.result-score-total{font-size:1.5rem;color:var(--text-secondary)}.result-score-pct{font-size:1.125rem;color:var(--text-secondary);margin-left:var(--spacing-sm)}.result-disclaimer{font-size:.8rem;color:var(--text-secondary);font-style:italic;opacity:.8}.result-section{width:100%;max-width:400px;margin-bottom:var(--spacing-xl);text-align:left}.result-section-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.skill-grid{display:flex;flex-direction:column;gap:var(--spacing-md)}.skill-card{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-md);box-shadow:var(--shadow-sm);border-left:4px solid var(--primary-color)}.skill-card-strong{border-left-color:var(--success-color)}.skill-card-solid{border-left-color:#3b82f6}.skill-card-developing{border-left-color:var(--warning-color)}.skill-card-needs-practice{border-left-color:var(--error-color)}.skill-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.skill-card-name{font-size:.95rem;font-weight:600;color:var(--text-primary)}.skill-card-band{font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:4px;text-transform:uppercase}.skill-band-strong{background-color:#d1fae5;color:#065f46}.skill-band-solid{background-color:#dbeafe;color:#1e40af}.skill-band-developing{background-color:#fef3c7;color:#92400e}.skill-band-needs-practice{background-color:#fee2e2;color:#991b1b}.skill-card-score{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.skill-card-score strong{color:var(--text-primary)}.skill-card-bar{height:6px;background-color:#e5e7eb;border-radius:3px;overflow:hidden}.skill-card-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}.skill-bar-strong{background-color:var(--success-color)}.skill-bar-solid{background-color:#3b82f6}.skill-bar-developing{background-color:var(--warning-color)}.skill-bar-needs-practice{background-color:var(--error-color)}.result-untested-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-md);text-align:center}.strengths-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.strengths-col,.needs-col{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-md);box-shadow:var(--shadow-sm)}.strengths-heading{font-size:.85rem;font-weight:600;margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.03em}.strengths-heading-good{color:var(--success-color)}.strengths-heading-need{color:var(--warning-color)}.strengths-item,.needs-item{font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);line-height:1.4}.strengths-empty,.needs-empty{font-style:italic;opacity:.7}.next-step-card{background-color:#f0f9ff;border-radius:var(--border-radius);padding:var(--spacing-md);border-left:4px solid var(--primary-color)}.next-step-text{font-size:.95rem;color:var(--text-primary);line-height:1.5}.result-sample-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;text-align:center;max-width:400px;margin-bottom:var(--spacing-xl);opacity:.8}.result-actions{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:300px;margin-bottom:var(--spacing-xl)}.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)}@media (max-width: 480px){.strengths-grid{grid-template-columns:1fr}.result-card-main{padding:var(--spacing-lg)}.result-level-value{font-size:1.5rem}.result-score-big{font-size:2.5rem}}.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}}.reading-passage{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);border-left:4px solid #06b6d4}.passage-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.passage-text{font-size:1rem;color:var(--text-primary);line-height:1.8;max-width:72ch}.reading-progress-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-align:center}.badge-reading{background-color:#cffafe;color:#155e75}.badge-subtype{background-color:#fef3c7;color:#92400e}.review-passage-header{background-color:#f0fdfa;border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border-left:4px solid #06b6d4}.review-passage-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.review-passage-text{font-size:.9rem;color:var(--text-secondary);line-height:1.7}@media (max-width: 480px){.passage-text{font-size:.95rem;line-height:1.7}.reading-passage,.review-passage-header{padding:var(--spacing-md)}}.listening-player{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);border-left:4px solid #8b5cf6}.listening-controls{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-wrap:wrap}.listening-btn{padding:var(--spacing-sm) var(--spacing-lg);min-height:44px;border:2px solid #e5e7eb;border-radius:var(--border-radius);background-color:var(--surface-color);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1;min-width:80px}.listening-btn:hover:not(:disabled){border-color:var(--primary-color);background-color:#f8fafc}.listening-btn:disabled{opacity:.5;cursor:not-allowed}.listening-btn-play{background-color:#8b5cf6;color:#fff;border-color:#8b5cf6}.listening-btn-play:hover:not(:disabled){background-color:#7c3aed;border-color:#7c3aed}.listening-btn-replay{background-color:#f3f4f6;border-color:#d1d5db}.listening-btn-replay:hover:not(:disabled){background-color:#e5e7eb}.listening-btn-stop{background-color:#fef2f2;border-color:#fecaca;color:var(--error-color)}.listening-btn-stop:hover:not(:disabled){background-color:#fee2e2;border-color:#f87171}.listening-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.listening-status{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.listening-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;opacity:.8}.badge-listening{background-color:#ede9fe;color:#5b21b6}.listening-progress-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-align:center}.review-clip-header{background-color:#faf5ff;border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border-left:4px solid #8b5cf6}.review-clip-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.review-clip-script{font-size:.9rem;color:var(--text-secondary);line-height:1.7;font-style:italic}@media (max-width: 480px){.listening-controls{flex-direction:column}.listening-btn{width:100%}.review-clip-header{padding:var(--spacing-md)}}.adaptive-progress-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-align:center}.adaptive-confidence-row{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.adaptive-confidence-label{font-size:.9rem;color:var(--text-secondary)}.adaptive-confidence-value{font-size:.9rem;font-weight:600;padding:2px 8px;border-radius:4px}.adaptive-confidence-higher{background-color:#d1fae5;color:#065f46}.adaptive-confidence-medium{background-color:#fef3c7;color:#92400e}.adaptive-confidence-low{background-color:#fee2e2;color:#991b1b}.adaptive-confidence-note{font-size:.85rem;color:var(--text-secondary);text-align:center;margin-bottom:var(--spacing-md)}.adaptive-fallback-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-sm)}.skill-card-level{font-size:.8rem;color:var(--text-secondary);margin-left:var(--spacing-sm)}@media (max-width: 480px){.adaptive-progress-label{font-size:.8rem}}.speaking-screen{justify-content:flex-start;align-items:center;padding-top:var(--spacing-lg)}.speaking-header{text-align:center;margin-bottom:var(--spacing-xl)}.speaking-title{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.speaking-prompt-card{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);width:100%;max-width:500px;border-left:4px solid var(--primary-color)}.speaking-prompt-text{font-size:1.125rem;color:var(--text-primary);line-height:1.6;margin-bottom:var(--spacing-md)}.speaking-hint{font-size:.9rem;color:var(--text-secondary);font-style:italic}.speaking-timer{font-size:2rem;font-weight:700;color:var(--primary-color);text-align:center;margin:var(--spacing-md) 0}.speaking-privacy{background-color:#f0fdf4;border-radius:var(--border-radius);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);width:100%;max-width:500px;text-align:center}.speaking-privacy-text{font-size:.85rem;color:#065f46}.speaking-recorder{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);width:100%;max-width:500px;text-align:center}.speaking-recorder-status{font-size:1rem;color:var(--text-primary);margin-bottom:var(--spacing-md)}.speaking-recording-active{color:var(--error-color);font-weight:600;animation:pulse 1s ease-in-out infinite}.speaking-recorder-error{color:var(--error-color)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.speaking-actions{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:300px}.speaking-btn{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}.speaking-btn:disabled{opacity:.5;cursor:not-allowed}.speaking-btn-primary{background-color:var(--primary-color);color:#fff}.speaking-btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.speaking-btn-secondary{background-color:var(--surface-color);border:2px solid var(--primary-color);color:var(--primary-color)}.speaking-btn-secondary:hover{background-color:#eff6ff}.speaking-btn-stop{background-color:var(--error-color);color:#fff}.speaking-btn-stop:hover{background-color:#dc2626}.speaking-checklist-intro{font-size:.9rem;color:var(--text-secondary);text-align:center;margin-bottom:var(--spacing-lg)}.speaking-checklist-form{width:100%;max-width:500px}.speaking-checklist-row{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-md);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm)}.speaking-checklist-item{font-size:.95rem;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.speaking-checklist-options{display:flex;gap:var(--spacing-sm)}.speaking-checklist-btn{flex:1;padding:var(--spacing-sm);min-height:36px;border:2px solid #e5e7eb;border-radius:var(--border-radius);background-color:var(--surface-color);font-size:.8rem;cursor:pointer;transition:all .2s ease}.speaking-checklist-btn:hover{border-color:var(--primary-color)}.speaking-checklist-btn-active{border-color:var(--primary-color);background-color:#eff6ff;color:var(--primary-color);font-weight:600}.speaking-result-card{background-color:var(--surface-color);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm);width:100%;max-width:500px;text-align:center}.speaking-result-band{font-size:1.25rem;font-weight:700;color:var(--primary-color);text-transform:capitalize;margin-bottom:var(--spacing-md)}.speaking-result-summary{font-size:1rem;color:var(--text-secondary);line-height:1.6}.speaking-section{width:100%;max-width:500px;margin-bottom:var(--spacing-xl)}.speaking-section-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.speaking-focus-item{font-size:.9rem;color:var(--text-secondary);padding:var(--spacing-sm);background-color:var(--surface-color);border-radius:var(--border-radius);margin-bottom:var(--spacing-sm);border-left:3px solid var(--primary-color)}.speaking-next-step{font-size:.95rem;color:var(--text-primary);text-align:center;padding:var(--spacing-md);background-color:#f0f9ff;border-radius:var(--border-radius)}.speaking-disclaimer{font-size:.8rem;color:var(--text-secondary);font-style:italic;text-align:center;max-width:500px;margin-bottom:var(--spacing-xl)}@media (max-width: 480px){.speaking-checklist-options{flex-wrap:wrap}.speaking-checklist-btn{min-width:70px}}@media (max-width: 480px){.start-screen{padding-top:var(--spacing-md)}.title{font-size:2rem}.subtitle{font-size:1rem}.quiz-type-buttons{max-width:100%}.quiz-type-button{padding:var(--spacing-md)}.button-label{font-size:1.125rem}.result-card-main{padding:var(--spacing-lg)}.result-score-big{font-size:2.5rem}.strengths-grid{grid-template-columns:1fr}.speaking-checklist-options{flex-wrap:wrap}.speaking-checklist-btn{min-width:70px;flex:1}.answer-item,.review-passage-header,.review-clip-header,.skill-card{padding:var(--spacing-md)}.adaptive-confidence-row{flex-direction:column;gap:var(--spacing-xs)}}