*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,SimSun,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.container{max-width:900px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d}h1{text-align:center;color:#333;margin-bottom:30px;font-size:32px}.search-box{display:flex;justify-content:center;margin-bottom:30px;gap:10px}#charInput{width:150px;padding:12px 20px;font-size:24px;text-align:center;border:3px solid #667eea;border-radius:50px;outline:none}#charInput:focus{border-color:#764ba2}.btn{padding:12px 30px;font-size:16px;border:none;border-radius:50px;cursor:pointer;transition:all .3s;font-weight:700}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:scale(1.05);box-shadow:0 5px 20px #667eea66}.content{display:grid;grid-template-columns:1fr 1fr;gap:30px}@media (max-width: 768px){.content{grid-template-columns:1fr}}.card{background:#f8f9fa;border-radius:15px;padding:20px;border:2px solid #e9ecef}.card-title{font-size:18px;color:#667eea;margin-bottom:15px;display:flex;align-items:center;gap:8px}.character-display{display:flex;flex-direction:column;align-items:center;gap:20px}#character{font-size:120px;color:#333;cursor:pointer;transition:all .3s;line-height:1}#character:hover{transform:scale(1.1);color:#667eea}#pinyin{font-size:32px;color:#e74c3c;font-weight:700;letter-spacing:3px;text-align:center}.pronunciation-tabs{display:flex;gap:10px;margin-top:10px;justify-content:center;flex-wrap:wrap}.pronunciation-tab{padding:8px 16px;border:2px solid #e74c3c;background:#fff;color:#e74c3c;border-radius:20px;cursor:pointer;transition:all .3s;font-size:14px}.pronunciation-tab.active,.pronunciation-tab:hover{background:#e74c3c;color:#fff}.pronunciation-tab .pinyin-text{font-weight:700}.pronunciation-tab .meaning{font-size:12px;margin-left:5px}.pronunciation-note{background:#fff3cd;border:1px solid #ffc107;border-radius:8px;padding:10px 15px;margin-top:10px;font-size:14px;color:#856404;text-align:center}.stroke-container{display:flex;justify-content:center;background:#fff;border-radius:10px;padding:10px}.controls{display:flex;gap:10px;margin-top:15px;justify-content:center}.btn-secondary{background:#28a745;color:#fff}.btn-secondary:hover{background:#218838}.btn-warning{background:#ffc107;color:#333}.btn-warning:hover{background:#e0a800}.btn-info{background:#17a2b8;color:#fff}.btn-info:hover{background:#138496}.words-section,.sentence-section{margin-top:20px}.word-item,.sentence-item{background:#fff;padding:12px 15px;margin-bottom:10px;border-radius:8px;cursor:pointer;transition:all .3s}.word-item{border-left:4px solid #667eea}.word-item:hover{transform:translate(5px);box-shadow:0 2px 10px #0000001a}.sentence-item{border:2px solid #28a745}.sentence-item:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.word-text{font-size:20px;color:#333;font-weight:700}.word-pinyin{font-size:14px;color:#e74c3c;margin-top:3px}.sentence-text{font-size:18px;color:#333;line-height:1.6}.sentence-pinyin{font-size:14px;color:#e74c3c;margin-top:8px;line-height:1.8}.highlight{color:#e74c3c;font-weight:700;background:#fff3cd;padding:2px 4px;border-radius:3px}.category-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}.category-btn{padding:8px 20px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:20px;cursor:pointer;transition:all .3s}.category-btn.active,.category-btn:hover{background:#667eea;color:#fff}.empty-state{text-align:center;padding:40px;color:#999;font-size:18px}