@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#2c3e50;background:linear-gradient(135deg,#fdf6ec 0%,#fef9ef 100%);min-height:100vh;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,sans-serif}.app{max-width:900px;margin:0 auto;padding:20px}.header{text-align:center;padding:30px 0 20px}.title{background:linear-gradient(135deg,#e74c3c,#f39c12,#2ecc71,#3498db);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.subtitle{color:#8e8e93;margin-top:6px;font-size:.95rem}.search-bar{background:#fff;border-radius:12px;align-items:center;gap:8px;margin-bottom:20px;padding:8px 16px;display:flex;box-shadow:0 2px 8px #0000000f}.search-icon{font-size:1.1rem}.search-input{background:0 0;border:none;outline:none;flex:1;padding:6px 0;font-family:inherit;font-size:1rem}.clear-btn{cursor:pointer;color:#666;background:#e0e0e0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;display:flex}.clear-btn:hover{background:#ccc}.tab-bar{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.tab{cursor:pointer;background:#fff;border:2px solid #e8e8e8;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;min-width:80px;padding:12px 16px;font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s;display:flex}.tab:hover{border-color:#3498db;transform:translateY(-1px)}.tab.active{color:#fff;background:linear-gradient(135deg,#3498db,#2980b9);border-color:#2980b9}.tab-icon{font-size:1rem}.sub-tab-bar{gap:6px;margin-bottom:20px;display:flex}.sub-tab{cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:8px 18px;font-family:inherit;font-size:.88rem;transition:all .15s}.sub-tab:hover{border-color:#3498db}.sub-tab.active{color:#fff;background:#3498db;border-color:#3498db}.section{margin-bottom:32px}.section-title{margin-bottom:8px;font-size:1.4rem}.section-intro{color:#666;margin-bottom:20px;line-height:1.6}.section-desc{color:#888;margin-bottom:12px;font-size:.92rem}.sub-title{color:#555;border-bottom:2px solid #f0f0f0;margin-top:20px;margin-bottom:12px;padding-bottom:6px;font-size:1.05rem}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.flow-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;display:grid}.yunmu-card{background:#fff;border-radius:10px;padding:12px 14px;transition:all .15s;box-shadow:0 1px 4px #00000014}.yunmu-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001f}.card{background:#fff;border-radius:12px;padding:16px;transition:all .2s;box-shadow:0 2px 8px #0000000d}.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.card-header{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.shengmu-card{border-left:4px solid #e74c3c}.danyun-card{border-left:4px solid #3498db}.fuyun-card{border-left:4px solid #2ecc71}.biyun-card{border-left:4px solid #9b59b6}.special-card{border-left:4px solid #f39c12}.pinyin-label{color:#e74c3c;font-size:1.3rem;font-weight:700}.zh-label{color:#2c3e50;font-size:1.1rem}.type-tag,.cat-tag{color:#666;background:#f0f0f0;border-radius:20px;padding:2px 8px;font-size:.75rem}.cat-tag{color:#1976d2;background:#e3f2fd}.card-desc{color:#666;margin-bottom:4px;font-size:.88rem}.card-example{color:#999;font-size:.85rem}.card-note{color:#e67e22;margin-top:4px;font-size:.82rem}.mini-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px #0000000f}.mini-row{border-bottom:1px solid #f0f0f0;gap:12px;padding:10px 16px;display:flex}.mini-row:last-child{border-bottom:none}.header-row{color:#555;background:#f8f9fa;font-size:.88rem;font-weight:600}.mini-cell{flex:1;align-items:center;display:flex}.w1{flex:0 0 80px}.w2{flex:0 0 100px}.w3,.w4{flex:2}.pinyin-text{color:#e74c3c;font-size:1.05rem;font-weight:700}.speak-btn{cursor:pointer;background:#e8f4fd;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-left:auto;font-size:.9rem;transition:all .15s;display:flex}.speak-btn:hover{background:#d0ebfc;transform:scale(1.15)}.speak-btn:active{transform:scale(.95)}.speak-btn-sm{cursor:pointer;opacity:.5;background:0 0;border:none;flex:0 0 28px;padding:0 4px;font-size:.8rem;transition:all .15s}.speak-btn-sm:hover{opacity:1;transform:scale(1.3)}.top100-wrapper{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.top-no{color:#999;width:40px;font-size:.82rem}.top-char{width:50px;font-size:1.15rem;font-weight:600}.top-pinyin{color:#e74c3c;font-size:.95rem}.tc1{flex:0 0 50px}.tc2{flex:0 0 60px}.tc3{flex:1}.quick-label{color:#333;font-weight:600}.qw1{flex:0 0 180px}.qw2{flex:1}.info-box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000000d}.info-box h3{margin-bottom:12px;font-size:1rem}.info-box p{color:#555;font-size:.92rem;line-height:1.9}.tone-box{background:#fafafa;border-left:4px solid #3498db;border-radius:10px;margin-bottom:10px;padding:14px 18px}.tone-box h4{color:#333;margin-bottom:6px;font-size:.95rem}.tone-box p{color:#555;font-size:.9rem;line-height:1.7}.tone-example{color:#e74c3c;margin-top:4px;font-weight:500}.tone-warn{margin-top:4px;font-size:.87rem;color:#e67e22!important}.tone-sym{text-align:center;font-size:1.6rem;font-weight:700}.tone1{color:#e74c3c}.tone2{color:#e67e22}.tone3{color:#2ecc71}.tone4{color:#3498db}.tone-badge{font-size:.88rem;font-weight:600}.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.collapsible:hover .collapsible-title{color:#3498db}.collapsible-title{justify-content:space-between;align-items:center;display:flex}.collapse-icon{color:#aaa;font-size:.75rem;transition:transform .2s}.t1w1{flex:0 0 72px}.t1w2{flex:0 0 50px}.t1w3,.t1w4{flex:0 0 40px}.t1w5{flex:0 0 80px}.t1w6{flex:1}.md1{color:#e74c3c;flex:0 0 60px;font-weight:600}.md2{flex:1}.err1{color:#e74c3c;flex:0 0 120px;font-weight:600}.err2{flex:1}.err3{flex:1.5}.footer{text-align:center;color:#999;border-top:1px solid #eee;margin-top:32px;padding:24px 0;font-size:.85rem}@media (width<=600px){.title{font-size:1.5rem}.grid{grid-template-columns:1fr}.flow-grid{grid-template-columns:1fr 1fr}.tab{padding:10px;font-size:.85rem}.top100-wrapper{grid-template-columns:1fr}.qw1{flex:0 0 120px}.err1{flex:0 0 80px}.t1w1{flex:0 0 60px}.t1w2{flex:0 0 40px}.t1w5{flex:0 0 60px}.md2{font-size:.82rem}}