.progress-bar[data-v-70e2ef02]{width:80%;max-width:500px;height:20px;background:#e0e0e0;border-radius:10px;margin:0 auto 10px;overflow:hidden;box-shadow:inset 0 2px 5px #0003}.progress-fill[data-v-70e2ef02]{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.progress-text[data-v-70e2ef02]{font-size:1.1rem;color:#666;font-weight:700}.pinyin-display[data-v-70e2ef02]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;min-height:400px}.pinyin-card[data-v-70e2ef02]{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:30px;padding:40px;margin-bottom:30px;text-align:center;box-shadow:0 15px 35px #667eea66,inset 0 0 0 4px #ffffff1a;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);min-width:250px;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center}.pinyin-letter[data-v-70e2ef02]{font-size:6rem;font-weight:700;color:#fff;text-shadow:0 4px 10px rgba(0,0,0,.3);margin-bottom:20px;font-family:Arial,Microsoft YaHei,sans-serif}.tone-mark[data-v-70e2ef02]{color:gold;font-size:1.2rem;font-weight:700;margin-bottom:15px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.pronunciation-tip[data-v-70e2ef02]{color:#a8e6cf;font-size:1rem;text-align:center;line-height:1.4;max-width:300px}.controls[data-v-70e2ef02]{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.control-btn[data-v-70e2ef02]{padding:15px 25px;border:none;border-radius:25px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:120px;text-align:center}.control-btn.primary[data-v-70e2ef02]{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);color:#fff;box-shadow:0 8px 20px #ff6b6b66}.control-btn.primary[data-v-70e2ef02]:hover{transform:translateY(-3px);box-shadow:0 12px 25px #ff6b6b99}.control-btn[data-v-70e2ef02]:not(.primary){background:linear-gradient(135deg,#74b9ff 0%,#0984e3 100%);color:#fff;box-shadow:0 8px 20px #74b9ff66}.control-btn[data-v-70e2ef02]:not(.primary):hover{transform:translateY(-3px);box-shadow:0 12px 25px #74b9ff99}.pinyin-practice[data-v-70e2ef02]{padding:20px;background:rgba(255,255,255,.1);border-radius:25px;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2)}.practice-title[data-v-70e2ef02]{font-size:1.5rem;color:#667eea;margin-bottom:20px;text-align:center}.practice-instruction[data-v-70e2ef02]{font-size:1.1rem;color:#555;margin-bottom:15px;text-align:center}.practice-options[data-v-70e2ef02]{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:25px}.practice-option[data-v-70e2ef02]{padding:12px 20px;border:2px solid #667eea;border-radius:25px;background:white;color:#667eea;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:80px;text-align:center}.practice-option[data-v-70e2ef02]:hover{background:#667eea;color:#fff;transform:translateY(-3px);box-shadow:0 5px 15px #667eea66}.learning-tips[data-v-70e2ef02]{background:rgba(255,255,255,.3);border-radius:20px;padding:15px}.learning-tips h4[data-v-70e2ef02]{color:#667eea;margin-bottom:10px;text-align:center}.tips-list[data-v-70e2ef02]{list-style:none;padding:0}.tip-item[data-v-70e2ef02]{padding:8px 0;color:#555;font-size:.9rem;border-bottom:1px dashed #ccc}.tip-item[data-v-70e2ef02]:last-child{border-bottom:none}.achievements-section[data-v-70e2ef02]{margin-top:30px;text-align:center}.achievements-section h3[data-v-70e2ef02]{font-size:1.5rem;color:#ff6b6b;margin-bottom:15px}.achievements-grid[data-v-70e2ef02]{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}.achievement-item[data-v-70e2ef02]{display:flex;flex-direction:column;align-items:center;padding:15px;border:2px solid #ddd;border-radius:15px;opacity:.5;transition:all .3s ease}.achievement-item.unlocked[data-v-70e2ef02]{opacity:1;border:2px solid #ffd700;background:rgba(255,215,0,.1);transform:scale(1.05)}.achievement-emoji[data-v-70e2ef02]{font-size:2rem;margin-bottom:5px}.achievement-name[data-v-70e2ef02]{font-size:.9rem;color:#666}@media (max-width: 768px){.pinyin-letter[data-v-70e2ef02]{font-size:4rem}.pinyin-card[data-v-70e2ef02]{padding:30px 20px;min-width:200px;min-height:200px}.control-btn[data-v-70e2ef02]{padding:12px 20px;font-size:1rem;min-width:100px}.practice-options[data-v-70e2ef02]{flex-direction:column}.practice-option[data-v-70e2ef02]{width:100%}}@media (max-width: 375px){.pinyin-letter[data-v-70e2ef02]{font-size:3rem}.pinyin-card[data-v-70e2ef02]{padding:20px 15px;min-width:150px;min-height:180px}.control-btn[data-v-70e2ef02]{padding:10px 15px;font-size:.9rem;min-width:90px}}