:root{--bg:#fff9e6;--card-bg:#fff;--card-blue:#e0f7fa;--card-green:#e0f2f1;--card-pink:#fce4ec;--vowel:#ff7a85;--consonant:#5b9bd5;--cluster:#ffb300;--text:#333;--text-light:#888;--radius:16px;--radius-sm:10px;--shadow:0 4px 12px #00000014}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:70px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.ipa{font-family:Times New Roman,Doulos SIL,serif}.bottom-nav{z-index:100;background:#fff;border-radius:20px 20px 0 0;justify-content:space-around;align-items:center;height:60px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000000f}.nav-item{color:var(--text-light);flex-direction:column;align-items:center;gap:4px;font-size:12px;text-decoration:none;transition:all .2s;display:flex}.nav-item.active{color:var(--vowel);transform:scale(1.05)}.nav-item svg{stroke-width:2px}.nav-text{font-weight:500}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:16px}.phoneme-block{border-radius:8px;margin:2px;padding:4px 10px;font-size:16px;font-weight:700;transition:all .3s;display:inline-block}.phoneme-block.vowel{background:var(--vowel);color:#fff}.phoneme-block.consonant{background:var(--consonant);color:#fff}.phoneme-block.active{transform:scale(1.3);box-shadow:0 0 12px #ff7a8599}.grapheme-tag{background:var(--card-green);color:#00695c;border-radius:6px;margin:2px;padding:2px 8px;font-size:14px;display:inline-block}.cluster-tag{color:#e65100;background:#fff3e0;border-radius:6px;margin:2px;padding:2px 8px;font-size:13px;display:inline-block}.filter-btn{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:20px;margin:4px;padding:6px 14px;font-size:14px;transition:all .2s;display:inline-block}.filter-btn.active{border-color:var(--vowel);background:var(--card-pink);color:var(--vowel)}.filter-btn:hover{border-color:var(--consonant)}@keyframes starFall{0%{opacity:0;transform:translateY(-20px)scale(0)}50%{opacity:1;transform:translateY(0)scale(1.2)}to{opacity:.8;transform:translateY(10px)scale(1)}}.star-reward{font-size:24px;animation:.6s ease-out forwards starFall}.page-container{max-width:600px;margin:0 auto;padding:16px}.page-title{text-align:center;color:var(--text);margin-bottom:16px;font-size:22px;font-weight:700}.loading{text-align:center;color:var(--text-light);padding:40px;font-size:16px}.empty{text-align:center;color:var(--text-light);padding:60px 20px}.empty-icon{margin-bottom:12px;font-size:48px}button svg{vertical-align:middle}.app-toast{color:#fff;opacity:0;pointer-events:none;z-index:9999;background:#333333e6;border-radius:20px;max-width:80vw;padding:10px 18px;font-size:14px;transition:opacity .25s,transform .25s;position:fixed;bottom:90px;left:50%;transform:translate(-50%)translateY(10px);box-shadow:0 6px 16px #0003}.app-toast.show{opacity:1;transform:translate(-50%)translateY(0)}.page-fade-enter-active,.page-fade-leave-active{transition:opacity .15s}.page-fade-enter-from,.page-fade-leave-to{opacity:0}