*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#333}#app-root{width:100%;min-height:100vh;display:flex;flex-direction:column}.login-page[data-v-9229c329]{width:100%;height:100vh;background:var(--bg-main);position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.bg-decoration[data-v-9229c329]{position:absolute;inset:0;pointer-events:none}.bubble[data-v-9229c329]{position:absolute;border-radius:50%;opacity:.3}.bubble-1[data-v-9229c329]{width:120px;height:120px;background:#4caf50;top:10%;right:5%;animation:float-9229c329 6s ease-in-out infinite}.bubble-2[data-v-9229c329]{width:80px;height:80px;background:#ff8c42;top:60%;left:5%;animation:float-9229c329 8s ease-in-out infinite 1s}.bubble-3[data-v-9229c329]{width:100px;height:100px;background:#667eea;bottom:10%;right:15%;animation:float-9229c329 7s ease-in-out infinite 2s}@keyframes float-9229c329{0%,to{transform:translateY(0)}50%{transform:translateY(-30px)}}.scroll-container[data-v-9229c329]{width:100%;height:100%;position:relative;z-index:1;overflow-y:auto}.login-wrapper[data-v-9229c329]{padding:24px 20px 40px;display:flex;flex-direction:column;min-height:100vh}.logo-section[data-v-9229c329]{text-align:center;margin-bottom:16px;margin-top:12px}.logo-image[data-v-9229c329]{height:100px;width:auto;object-fit:contain;animation:bounce-9229c329 2s ease-in-out infinite}@keyframes bounce-9229c329{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.welcome-section[data-v-9229c329]{text-align:center;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}.welcome-title[data-v-9229c329]{font-size:18px;font-weight:700;color:#333;letter-spacing:.3px;line-height:1.3}.welcome-subtitle[data-v-9229c329]{font-size:13px;color:#999;font-weight:500}.features-section[data-v-9229c329]{margin-bottom:24px}.feature-item[data-v-9229c329]{display:flex;align-items:center;padding:12px;margin-bottom:8px;background:#fff9;border-radius:10px;border:1px solid rgba(200,200,200,.2)}.feature-emoji[data-v-9229c329]{font-size:32px;margin-right:12px;flex-shrink:0}.feature-content[data-v-9229c329]{display:flex;flex-direction:column}.feature-title[data-v-9229c329]{font-size:13px;font-weight:600;color:#333}.feature-desc[data-v-9229c329]{font-size:12px;color:#999;margin-top:2px}.form-section[data-v-9229c329]{flex:1}.login-form[data-v-9229c329]{animation:slideUp-9229c329 .4s ease-out}@keyframes slideUp-9229c329{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.form-group[data-v-9229c329]{margin-bottom:12px}.form-input[data-v-9229c329]{width:100%;padding:12px;border:2px solid #E8DAFF;border-radius:8px;font-size:13px;color:#333;background:#fff;box-sizing:border-box;transition:all .3s}.form-input[data-v-9229c329]:focus{border-color:#9c6fe4;box-shadow:0 0 0 3px #9c6fe414;outline:none}.form-input[data-v-9229c329]:disabled{background:#f5f5f5;color:#ccc;border-color:#eee}.password-wrapper[data-v-9229c329]{position:relative;display:flex;align-items:center}.password-field[data-v-9229c329]{width:100%;padding-right:36px}.eye-icon[data-v-9229c329]{position:absolute;right:10px;font-size:18px;cursor:pointer;user-select:none}.btn[data-v-9229c329]{width:100%;padding:12px;border-radius:8px;font-size:15px;font-weight:600;border:none;margin-top:8px;transition:all .3s;color:#fff;cursor:pointer}.btn-login[data-v-9229c329]{background:linear-gradient(135deg,#9c6fe4,#c49ef5)}.btn-login[data-v-9229c329]:active:not(:disabled){transform:scale(.98);box-shadow:0 4px 12px #9c6fe433}.btn[data-v-9229c329]:disabled{opacity:.6;cursor:not-allowed}.footer-tips[data-v-9229c329]{margin-top:16px;text-align:center;display:flex;justify-content:center;gap:6px}.tip-text[data-v-9229c329]{font-size:13px;color:#999}.link-register[data-v-9229c329]{font-size:13px;color:#9c6fe4;font-weight:600;text-decoration:none;transition:all .3s}.link-register[data-v-9229c329]:hover{color:#7a4cc4}.error-message[data-v-9229c329]{margin-top:16px;padding:12px;background:#ffebee;color:#c62828;border-radius:8px;font-size:14px;text-align:center}.literacy-page[data-v-f080916a]{display:flex;flex-direction:column;height:100vh;background:#f3eeff;position:relative}.loading-overlay[data-v-f080916a]{position:absolute;inset:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:9999}.loading-content[data-v-f080916a]{display:flex;flex-direction:column;align-items:center;gap:16px}.spinner[data-v-f080916a]{width:48px;height:48px;border:4px solid #f0f0f0;border-top-color:#9c6fe4;border-radius:50%;animation:spin-f080916a 1s linear infinite}@keyframes spin-f080916a{to{transform:rotate(360deg)}}.loading-text[data-v-f080916a]{font-size:14px;color:#666;font-weight:500}.header[data-v-f080916a]{background:#fff;padding:48px 20px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px #9c6fe414;flex-shrink:0}.back-btn[data-v-f080916a]{padding:0;border:none;border-radius:10px;background:#f5f5f5;color:#333;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;width:60px;height:36px;flex-shrink:0;transition:all .3s;text-decoration:none;white-space:nowrap}.back-btn[data-v-f080916a]:active{background:#efefef}.progress-wrap[data-v-f080916a]{flex:1}.prev-btn[data-v-f080916a]{width:80px;height:36px;border-radius:8px;background:#f0f0f0;border:none;font-size:12px;color:#666;padding:0;flex-shrink:0;cursor:pointer}.prev-btn[data-v-f080916a]:active{background:#e0e0e0}.progress-info[data-v-f080916a]{display:flex;justify-content:space-between;font-size:13px;color:#999;margin-bottom:6px}.progress-bar[data-v-f080916a]{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden}.progress-fill[data-v-f080916a]{height:100%;background:linear-gradient(90deg,#9c6fe4,#c49ef5);transition:width .3s}.question-area[data-v-f080916a]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.mode-label[data-v-f080916a]{font-size:14px;color:#9c6fe4;font-weight:600;margin-bottom:16px;padding:6px 12px;background:#e8daff;border-radius:12px}.read-mode[data-v-f080916a]{width:100%;display:flex;flex-direction:column;align-items:center}.char-display[data-v-f080916a]{background:#fff;border-radius:24px;width:160px;height:160px;display:flex;align-items:center;justify-content:center;font-size:96px;font-weight:700;color:#333;box-shadow:0 8px 32px #9c6fe426;border:3px solid #E8DAFF;margin-bottom:24px}.question-hint[data-v-f080916a]{font-size:13px;color:#bbb;margin-bottom:24px;text-align:center}.record-section[data-v-f080916a]{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.record-btn[data-v-f080916a]{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#9c6fe4,#c49ef5);border:none;color:#fff;font-size:16px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #9c6fe44d;cursor:pointer}.record-btn[data-v-f080916a]:active:not(.disabled){transform:scale(.95)}.record-btn.recording[data-v-f080916a]{animation:pulse-f080916a 1s infinite;box-shadow:0 0 0 8px #9c6fe433}.record-btn.disabled[data-v-f080916a]{opacity:.6;pointer-events:none;cursor:not-allowed}@keyframes pulse-f080916a{0%{box-shadow:0 0 #9c6fe466}70%{box-shadow:0 0 0 16px #9c6fe400}to{box-shadow:0 0 #9c6fe400}}.record-icon[data-v-f080916a]{font-size:32px}.record-stop-btn[data-v-f080916a]{display:flex;gap:12px}.btn-stop[data-v-f080916a]{width:100px;height:40px;border-radius:8px;background:#f44336;color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer}.recognition-result[data-v-f080916a]{width:100%;max-width:280px;padding:12px 16px;background:#f9f9f9;border-radius:12px;margin-bottom:16px;border:1px solid #E8DAFF}.result-label[data-v-f080916a]{font-size:12px;color:#999;margin-bottom:4px}.result-status[data-v-f080916a]{font-size:14px;font-weight:600}.result-status.correct[data-v-f080916a]{color:#4caf50}.result-status.wrong[data-v-f080916a]{color:#f44336}.scores-detail[data-v-f080916a]{margin-top:12px;font-size:12px;color:#999;display:flex;flex-direction:column;gap:4px}.score-item[data-v-f080916a]{display:flex;justify-content:space-between}.score-value[data-v-f080916a]{color:#9c6fe4;font-weight:600}.listen-mode[data-v-f080916a]{width:100%;display:flex;flex-direction:column;align-items:center}.play-btn[data-v-f080916a]{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#9c6fe4,#c49ef5);border:none;color:#fff;font-size:14px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .2s;margin-bottom:24px;box-shadow:0 4px 16px #9c6fe44d;cursor:pointer}.play-btn[data-v-f080916a]:active:not(:disabled){transform:scale(.95)}.play-btn[data-v-f080916a]:disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.play-icon[data-v-f080916a]{font-size:28px}.audio-status[data-v-f080916a]{font-size:12px;color:#9c6fe4;margin-bottom:12px;min-height:16px}.options-grid[data-v-f080916a]{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:280px;margin-bottom:24px}.option-btn[data-v-f080916a]{padding:20px;border-radius:16px;border:2px solid #E8DAFF;background:#fff;font-size:28px;font-weight:700;color:#333;text-align:center;transition:all .15s;display:flex;align-items:center;justify-content:center;min-height:80px;line-height:1.2;cursor:pointer}.option-btn[data-v-f080916a]:active:not(:disabled){transform:scale(.97)}.option-btn[data-v-f080916a]:disabled{opacity:.8;pointer-events:none;cursor:not-allowed}.char-option[data-v-f080916a]{font-size:28px;font-weight:700;color:#333}.option-btn.show-correct[data-v-f080916a]{background:#e8f5e9;border-color:#4caf50}.option-btn.show-correct .char-option[data-v-f080916a]{color:#4caf50}.option-btn.selected-correct[data-v-f080916a]{background:#e8f5e9;border-color:#4caf50;box-shadow:0 0 0 3px #4caf5033}.option-btn.selected-correct .char-option[data-v-f080916a]{color:#4caf50}.option-btn.selected-wrong[data-v-f080916a]{background:#ffebee;border-color:#f44336;box-shadow:0 0 0 3px #f4433633}.option-btn.selected-wrong .char-option[data-v-f080916a]{color:#f44336}.playback-section[data-v-f080916a]{display:flex;align-items:center;gap:12px;margin-bottom:16px}.playback-btn[data-v-f080916a]{width:100px;height:40px;border-radius:8px;background:linear-gradient(135deg,#4caf50,#66bb6a);border:none;color:#fff;font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.playback-btn[data-v-f080916a]:active:not(:disabled){transform:scale(.95)}.playback-btn[data-v-f080916a]:disabled{opacity:.7;pointer-events:none;cursor:not-allowed}.playback-btn.playing[data-v-f080916a]{animation:pulse-f080916a 1s infinite}.playback-icon[data-v-f080916a]{font-size:16px}.stop-btn[data-v-f080916a]{width:80px;height:40px;border-radius:8px;background:#f44336;border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer}.feedback[data-v-f080916a]{height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;opacity:0;transition:opacity .2s}.feedback.show[data-v-f080916a]{opacity:1}.feedback.correct[data-v-f080916a]{color:#4caf50}.feedback.wrong[data-v-f080916a]{color:#f44336}.score-detail[data-v-f080916a]{margin-top:12px;padding:12px;background:#ffffff80;border-radius:8px;font-size:12px}.score-row[data-v-f080916a]{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:4px 0}.score-row[data-v-f080916a]:last-child{margin-bottom:0}.score-label[data-v-f080916a]{color:#666;font-weight:500}.score-value[data-v-f080916a]{color:#9c6fe4;font-weight:700;font-size:14px}:root{--primary-orange: #FF8C42;--primary-orange-light: #FFB347;--primary-orange-lighter: #FFE4CC;--bg-main: #FFF8EE;--bg-secondary: #F3EEFF;--bg-tertiary: #f0f4ff;--bg-card: #ffffff;--bg-light: #f5f5f5;--text-primary: #333333;--text-secondary: #666666;--text-tertiary: #999999;--text-light: #cccccc;--text-white: #ffffff;--border-main: #FFE4CC;--border-light: #f0f0f0;--success: #4CAF50;--warning: #FF9800;--error: #F44336;--info: #9C6FE4;--shadow-sm: 0 2px 8px rgba(255, 140, 66, .08);--shadow-md: 0 4px 12px rgba(255, 140, 66, .15);--shadow-lg: 0 8px 24px rgba(255, 140, 66, .15)}.page-container{background:var(--bg-main);min-height:100vh}.page-header{background:linear-gradient(135deg,var(--primary-orange),var(--primary-orange-light));padding:48px 20px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 16px #ff8c4226;border-radius:0 0 20px 20px;flex-shrink:0}.page-header h1{margin:0;flex:1;font-size:18px;color:#fff;font-weight:700;text-align:center;white-space:nowrap}.back-btn{width:60px;height:36px;border-radius:10px;background:var(--bg-light);border:none;font-size:14px;color:var(--text-primary);flex-shrink:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s;font-weight:600;white-space:nowrap}.back-btn:hover{background:#efefef;transform:translateY(-1px)}.back-btn:active{background:#efefef;transform:translateY(0)}.card{background:var(--bg-card);border-radius:16px;padding:12px;box-shadow:var(--shadow-sm);border:2px solid var(--border-main);transition:all .3s}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary{background:linear-gradient(135deg,var(--primary-orange),var(--primary-orange-light));color:#fff;border:none;border-radius:10px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #ff8c4233}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff8c424d}.btn-primary:active{transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--primary-orange);border:2px solid var(--primary-orange);border-radius:10px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}.btn-secondary:hover{background:#ff8c420d;transform:translateY(-2px)}.btn-secondary:active{transform:translateY(-1px)}