:root{--sky-50:#f0f9ff;--sky-100:#e0f2fe;--sky-200:#bae6fd;--sky-300:#7dd3fc;--sky-400:#38bdf8;--sky-500:#0ea5e9;--sky-600:#0284c7;--sky-700:#0369a1;--sky-800:#075985;--sky-900:#0c4a6e;--white:#fff;--surface:#fff;--surface-alt:#f8fafc;--surface-glass:#ffffffe0;--text-main:#0f172a;--text-muted:#64748b;--text-light:#94a3b8;--text-sky:#0284c7;--border-light:#e2e8f0;--border-sky:#bae6fd;--border-focus:#0284c7;--success:#10b981;--success-bg:#ecfdf5;--success-border:#a7f3d0;--danger:#ef4444;--danger-bg:#fef2f2;--danger-border:#fecaca;--warning:#f59e0b;--warning-bg:#fffbeb;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px #0f172a0f;--shadow-md:0 4px 12px #0f172a14;--shadow-lg:0 10px 25px -5px #0284c726, 0 8px 10px -6px #0f172a0d;--shadow-sky:0 8px 24px #0284c740;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-pinyin:"Noto Sans SC", "Outfit", sans-serif}html,body{box-sizing:border-box;-webkit-tap-highlight-color:transparent;max-width:100vw;margin:0;padding:0;overflow-x:hidden}body{font-family:var(--font-sans);color:var(--text-main);-webkit-font-smoothing:antialiased;background:linear-gradient(#e0f2fe 0%,#f0f9ff 180px,#fff 600px) fixed;min-height:100vh;line-height:1.5}button,input,select,textarea{font-family:inherit}.app-header{z-index:50;-webkit-backdrop-filter:blur(14px);background:var(--surface-glass);box-shadow:var(--shadow-sm);border-bottom:1px solid #bae6fd80;transition:all .2s;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:.85rem 1.25rem;display:flex}.logo-group{cursor:pointer;align-items:center;gap:.75rem;text-decoration:none;display:flex}.logo-icon{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--sky-400), var(--sky-600));width:40px;height:40px;color:var(--white);justify-content:center;align-items:center;display:flex;box-shadow:0 4px 10px #0284c74d}.logo-text h1{letter-spacing:-.02em;background:linear-gradient(135deg, var(--sky-800) 0%, var(--sky-600) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:800}.logo-text span{color:var(--sky-600);letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;font-weight:600}.nav-tabs{background:var(--sky-50);border-radius:var(--radius-full);border:1px solid var(--border-sky);align-items:center;gap:.5rem;padding:.3rem;display:flex}.nav-tab-btn{border-radius:var(--radius-full);color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:.45rem;padding:.55rem 1.15rem;font-size:.9rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.nav-tab-btn:hover{color:var(--sky-700);background:#fff9}.nav-tab-btn.active{background:var(--white);color:var(--sky-700);box-shadow:0 2px 8px #0284c726}.mobile-bottom-nav{-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border-sky);z-index:60;background:#fffffff0;height:64px;padding:0 .5rem;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0f172a0d}.mobile-nav-inner{justify-content:space-around;align-items:center;height:100%;display:flex}.mobile-nav-item{color:var(--text-light);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:60px;padding:6px 12px;font-size:.72rem;font-weight:600;transition:all .15s;display:flex}.mobile-nav-item.active{color:var(--sky-600)}.mobile-nav-item.active svg{stroke:var(--sky-600);transform:translateY(-1px)}.app-main{max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 4rem}.card{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--border-sky);box-shadow:var(--shadow-md);padding:1.75rem;position:relative;overflow:hidden}.card-header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.card-title{color:var(--sky-900);align-items:center;gap:.6rem;font-size:1.35rem;font-weight:700;display:flex}.card-subtitle{color:var(--text-muted);margin-top:.2rem;font-size:.9rem}.chart-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.search-input-wrapper{flex:1;min-width:260px;max-width:400px;position:relative}.search-input-wrapper svg{color:var(--sky-500);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{border-radius:var(--radius-full);border:1.5px solid var(--border-sky);background:var(--white);width:100%;color:var(--text-main);outline:none;padding:.7rem 1rem .7rem 2.75rem;font-size:.95rem;transition:all .2s}.search-input:focus{border-color:var(--sky-500);box-shadow:0 0 0 3px #0ea5e926}.table-scroll-container{border-radius:var(--radius-lg);border:1px solid var(--border-sky);background:var(--white);width:100%;box-shadow:var(--shadow-sm);max-height:65vh;position:relative;overflow-x:auto}.pinyin-table{border-collapse:separate;border-spacing:0;text-align:center;width:100%;font-size:.92rem}.pinyin-table th,.pinyin-table td{white-space:nowrap;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;padding:.6rem .75rem}.pinyin-table thead th{z-index:20;background:var(--sky-100);color:var(--sky-900);font-size:.95rem;font-weight:700;position:sticky;top:0;box-shadow:0 1px 2px #0000000d}.pinyin-table tbody th.final-header{z-index:10;background:var(--sky-50);color:var(--sky-800);font-weight:700;position:sticky;left:0;box-shadow:1px 0 2px #0000000d}.pinyin-table thead th:first-child{z-index:30;background:var(--sky-200);position:sticky;top:0;left:0}.pinyin-table td.cell-syllable{cursor:pointer;color:var(--text-main);-webkit-user-select:none;user-select:none;font-weight:500;transition:all .15s}.pinyin-table td.cell-syllable:hover{background:var(--sky-100);color:var(--sky-700);font-weight:700;transform:scale(1.05)}.pinyin-table td.cell-syllable.active{background:var(--sky-500);color:var(--white);font-weight:700}.pinyin-table td.cell-null{color:#cbd5e1;-webkit-user-select:none;user-select:none;background:#fafafa}.syllable-drawer-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99;background:#0f172a66;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.syllable-drawer-card{background:var(--white);border-radius:var(--radius-xl);width:100%;max-width:440px;box-shadow:var(--shadow-sky);border:1px solid var(--border-sky);padding:1.5rem;animation:.2s cubic-bezier(.16,1,.3,1) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.drawer-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.drawer-base-badge{color:var(--sky-800);letter-spacing:-.02em;font-size:1.75rem;font-weight:800}.drawer-tones-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem;display:grid}.tone-play-btn{border-radius:var(--radius-md);border:1.5px solid var(--border-sky);background:var(--sky-50);cursor:pointer;justify-content:space-between;align-items:center;padding:.85rem 1rem;transition:all .15s;display:flex}.tone-play-btn:hover{background:var(--sky-100);border-color:var(--sky-400);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.tone-play-btn.playing{background:var(--sky-600);border-color:var(--sky-600);color:var(--white);animation:1.2s infinite pulseSky}.tone-play-btn.playing .tone-text{color:var(--white)}.tone-play-btn.playing svg{stroke:var(--white)}.tone-mark{color:var(--sky-900);font-size:1.35rem;font-weight:700;font-family:var(--font-pinyin)}.tone-num-tag{color:var(--sky-600);background:var(--white);border-radius:var(--radius-full);padding:.2rem .5rem;font-size:.75rem;font-weight:600}.quiz-container{max-width:680px;margin:0 auto}.quiz-setup-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;display:grid}.quiz-option-card{border-radius:var(--radius-lg);border:2px solid var(--border-sky);background:var(--white);text-align:center;cursor:pointer;padding:1.25rem 1rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.quiz-option-card:hover{border-color:var(--sky-400);background:var(--sky-50)}.quiz-option-card.selected{border-color:var(--sky-600);background:var(--sky-100);box-shadow:0 4px 12px #0284c726}.quiz-option-number{color:var(--sky-800);font-size:2rem;font-weight:800}.quiz-option-label{color:var(--text-muted);font-size:.85rem;font-weight:600}.audio-hero-button{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--sky-400), var(--sky-600));border:4px solid var(--white);width:96px;height:96px;box-shadow:var(--shadow-sky);color:var(--white);cursor:pointer;justify-content:center;align-items:center;margin:1.5rem auto;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.audio-hero-button:hover{transform:scale(1.06)}.audio-hero-button:active{transform:scale(.96)}.audio-hero-button.playing{animation:1s infinite alternate pulseWave}@keyframes pulseWave{0%{box-shadow:0 0 #0ea5e980,0 8px 24px #0284c74d}to{box-shadow:0 0 0 16px #0ea5e900,0 8px 28px #0284c780}}.quiz-input-group{gap:.75rem;margin:1.5rem 0;display:flex}.quiz-input{border-radius:var(--radius-lg);border:2px solid var(--border-sky);color:var(--text-main);background:var(--white);text-align:center;letter-spacing:.05em;outline:none;flex:1;padding:.9rem 1.25rem;font-size:1.25rem;font-weight:600;transition:all .2s}.quiz-input:focus{border-color:var(--sky-500);box-shadow:0 0 0 4px #0ea5e926}.btn-primary{border-radius:var(--radius-lg);background:linear-gradient(135deg, var(--sky-500), var(--sky-600));color:var(--white);cursor:pointer;box-shadow:var(--shadow-sky);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.9rem 1.75rem;font-size:1rem;font-weight:700;transition:all .2s;display:inline-flex}.btn-primary:hover{background:linear-gradient(135deg, var(--sky-600), var(--sky-700));transform:translateY(-1px)}.btn-secondary{border-radius:var(--radius-lg);border:1.5px solid var(--border-sky);background:var(--white);color:var(--sky-700);cursor:pointer;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:var(--sky-50);border-color:var(--sky-400)}.tone-helper-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-bottom:1.25rem;display:flex}.tone-pill-btn{border-radius:var(--radius-full);border:1px solid var(--border-sky);background:var(--sky-50);color:var(--sky-800);cursor:pointer;padding:.4rem .85rem;font-size:.85rem;font-weight:600;transition:all .15s}.tone-pill-btn:hover{background:var(--sky-100);border-color:var(--sky-400)}.feedback-box{border-radius:var(--radius-lg);flex-direction:column;gap:.5rem;margin-top:1.25rem;padding:1.25rem;animation:.2s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.feedback-box.correct{background:var(--success-bg);border:1.5px solid var(--success-border);color:#065f46}.feedback-box.wrong{background:var(--danger-bg);border:1.5px solid var(--danger-border);color:#991b1b}.progress-track{background:var(--sky-100);border-radius:var(--radius-full);width:100%;height:8px;margin-bottom:1.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--sky-400), var(--sky-600));border-radius:var(--radius-full);height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.stat-card{background:var(--sky-50);border-radius:var(--radius-lg);border:1px solid var(--border-sky);text-align:center;padding:1.25rem}.stat-val{color:var(--sky-800);margin-top:.25rem;font-size:2.2rem;font-weight:800}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}@media (width<=768px){.app-header .nav-tabs{display:none}.mobile-bottom-nav{display:block}.app-main{padding:1rem .75rem 5.5rem}.card{border-radius:var(--radius-lg);padding:1.25rem 1rem}.quiz-input-group{flex-direction:column;gap:.75rem;width:100%;margin:1.25rem 0}.quiz-input{box-sizing:border-box;width:100%;min-width:0;padding:.85rem 1rem;font-size:1.2rem}.quiz-input-group .btn-primary{box-sizing:border-box;justify-content:center;width:100%;min-width:0;padding:.95rem 1rem;font-size:1.05rem}.quiz-setup-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.quiz-option-card{padding:.85rem .5rem}.quiz-option-number{font-size:1.5rem}.audio-hero-button{width:80px;height:80px}.pinyin-table th,.pinyin-table td{padding:.5rem .6rem;font-size:.85rem}}@media (width<=480px){.app-main{padding:.75rem .5rem 5.5rem}.card{padding:1rem .75rem}.tone-helper-bar{gap:.35rem}.tone-pill-btn{padding:.35rem .65rem;font-size:.8rem}}.audio-comparison-box{border-radius:var(--radius-md);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);background:#fffffff2;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin-top:.75rem;padding:.85rem;display:grid}.comparison-item{flex-direction:column;gap:.35rem;display:flex}.comparison-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.75rem;font-weight:700}.comparison-sound{align-items:baseline;gap:.4rem;display:flex}.sound-mark{font-size:1.35rem;font-weight:800;font-family:var(--font-pinyin)}.comparison-item.typed .sound-mark{color:#dc2626}.comparison-item.target .sound-mark{color:#0284c7}.sound-id{color:var(--text-muted);font-size:.85rem;font-weight:600}.comparison-divider{color:var(--sky-700);background:var(--sky-100);border-radius:var(--radius-full);justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;font-weight:800;display:flex}.audio-listen-btn{border-radius:var(--radius-md);cursor:pointer;background:var(--sky-50);border:1px solid var(--border-sky);width:100%;color:var(--sky-800);justify-content:center;align-items:center;gap:.35rem;padding:.45rem .65rem;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}.audio-listen-btn:hover{background:var(--sky-100);transform:translateY(-1px)}.audio-listen-btn.active-target{background:var(--sky-600);border-color:var(--sky-600);color:var(--white)}.audio-listen-btn.active-target:hover{background:var(--sky-700)}@media (width<=600px){.audio-comparison-box{grid-template-columns:1fr;gap:.75rem}.comparison-divider{margin:0 auto}}