*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Noto Sans TC,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#f5f7fa,#e4e9f2);min-height:100vh;color:#2c3e50;line-height:1.6}.app{max-width:720px;margin:0 auto;padding:0 16px;min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:40px 0 20px}.header-content h1{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.subtitle{color:#7f8c8d;font-size:.95rem}.empty-state{text-align:center;padding:80px 20px;color:#95a5a6}.empty-icon{font-size:3.5rem;margin-bottom:16px}.empty-state p{font-size:1.05rem;margin-bottom:4px}.empty-hint{font-size:.85rem!important;color:#bdc3c7}.word-list-section{flex:1;padding-bottom:40px}.word-list{display:flex;flex-direction:column;gap:12px}.app-footer{text-align:center;padding:24px 0;color:#bdc3c7;font-size:.8rem}.app-footer a{color:#667eea;text-decoration:none}.app-footer a:hover{text-decoration:underline}.list-enter-active{transition:all .4s ease}.list-leave-active{transition:all .3s ease}.list-enter-from{opacity:0;transform:translateY(-20px) scale(.95)}.list-leave-to{opacity:0;transform:translate(30px) scale(.95)}.expand-enter-active{transition:all .35s ease;overflow:hidden}.expand-leave-active{transition:all .25s ease;overflow:hidden}.expand-enter-from{opacity:0;max-height:0}.expand-enter-to,.expand-leave-from{opacity:1;max-height:2000px}.expand-leave-to{opacity:0;max-height:0}@media (max-width: 480px){.header-content h1{font-size:1.5rem}}.search-section{position:sticky;top:0;z-index:100;padding:16px 0;background:linear-gradient(135deg,#f5f7faf2,#e4e9f2f2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-box{background:#fff;border-radius:16px;padding:6px;box-shadow:0 4px 24px #00000014;border:2px solid transparent;transition:border-color .3s,box-shadow .3s}.search-box:focus-within{border-color:#667eea;box-shadow:0 4px 24px #667eea33}.input-wrapper{display:flex;align-items:center;gap:8px}.search-icon{width:22px;height:22px;color:#adb5bd;margin-left:12px;flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-size:1.05rem;padding:14px 8px;background:transparent;font-family:inherit;color:#2c3e50}.search-input::placeholder{color:#bdc3c7}.search-btn{padding:12px 28px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;font-family:inherit;min-width:80px}.search-btn:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.search-btn:active:not(:disabled){transform:scale(.98)}.search-btn:disabled{opacity:.5;cursor:not-allowed}.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:#e74c3c;font-size:.85rem;padding:8px 16px 4px;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.suggestions-dropdown{border-top:1px solid #f0f0f0;margin:0 6px}.suggestions-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 4px}.suggestions-title{font-size:.78rem;color:#95a5a6;font-weight:500}.suggestions-count{font-size:.72rem;color:#bdc3c7;background:#f0f0f0;padding:1px 8px;border-radius:10px}.suggestions-list{list-style:none;max-height:220px;overflow-y:auto;padding:4px 0 6px}.suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background .15s}.suggestion-item:hover,.suggestion-item.active{background:#f0f4ff}.suggestion-word{font-weight:600;color:#2c3e50;font-size:.95rem;flex-shrink:0}.suggestion-phonetic{color:#adb5bd;font-size:.8rem;font-style:italic;flex-shrink:0}.suggestion-brief{color:#95a5a6;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right}.dropdown-enter-active{transition:all .2s ease}.dropdown-leave-active{transition:all .15s ease}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-6px)}@media (max-width: 480px){.search-input{font-size:.95rem;padding:12px 6px}.search-btn{padding:10px 18px;font-size:.85rem}}.word-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px #0000000f;transition:box-shadow .3s,transform .2s}.word-card:hover{box-shadow:0 4px 20px #0000001a}.word-card.highlight-pulse{animation:highlightPulse 1.5s ease}@keyframes highlightPulse{0%{box-shadow:0 0 #667eea80}30%{box-shadow:0 0 0 8px #667eea40}to{box-shadow:0 2px 12px #0000000f}}.word-card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.word-card-header:hover{background:#f8f9fa}.word-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.word-text{font-size:1.25rem;font-weight:600;color:#2c3e50}.word-phonetic{font-size:.9rem;color:#7f8c8d;font-style:italic}.audio-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:2px 4px;border-radius:6px;transition:background .2s}.audio-btn:hover{background:#eef2ff}.word-actions{display:flex;align-items:center;gap:10px}.word-time{font-size:.78rem;color:#bdc3c7}.remove-btn{background:none;border:none;color:#ccc;font-size:.9rem;cursor:pointer;padding:4px 6px;border-radius:6px;transition:color .2s,background .2s}.remove-btn:hover{color:#e74c3c;background:#fef2f2}.chevron{width:20px;height:20px;color:#adb5bd;transition:transform .3s ease;flex-shrink:0}.chevron.expanded{transform:rotate(180deg)}.word-card-body{padding:0 20px 20px;border-top:1px solid #f0f0f0}.meaning-block{padding-top:16px}.meaning-block+.meaning-block{margin-top:12px;border-top:1px dashed #e9ecef}.meaning-header{margin-bottom:10px}.part-of-speech{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3px 14px;border-radius:20px;font-size:.82rem;font-weight:500}.definitions{display:flex;flex-direction:column;gap:12px}.definition-item{display:flex;gap:8px}.def-number{color:#667eea;font-weight:600;font-size:.9rem;flex-shrink:0;margin-top:1px}.def-content{flex:1}.def-text{color:#34495e;font-size:.95rem;line-height:1.6}.def-chinese{color:#e67e22;font-size:.9rem;margin-top:4px;font-weight:500}.def-example{color:#7f8c8d;font-size:.88rem;margin-top:6px;padding:8px 12px;background:#f8f9fa;border-left:3px solid #667eea;border-radius:0 8px 8px 0;font-style:italic}.example-label{font-style:normal;font-weight:500;color:#667eea}.synonyms{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.synonyms-label{font-size:.82rem;color:#95a5a6;font-weight:500}.synonym-tag{display:inline-block;padding:3px 12px;background:#eef2ff;color:#667eea;border-radius:20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.synonym-tag:hover{background:#667eea;color:#fff;transform:scale(1.05)}.antonym-tag{background:#fef2f2;color:#e74c3c}.antonym-tag:hover{background:#e74c3c;color:#fff}@media (max-width: 480px){.word-card-header{padding:14px 16px}.word-card-body{padding:0 16px 16px}.word-text{font-size:1.1rem}}