:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--background-color:#fff;--text-color:#1f2937;--text-secondary:#6b7280;--border-color:#e5e7eb;--hover-color:#f9fafb;--shadow-color:rgba(0,0,0,.05);--card-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.5}.container{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem}.search-container{margin-bottom:3rem}#emoji-search{width:100%;padding:1rem 1.25rem;font-size:1.1rem;border:1px solid var(--border-color);border-radius:12px;margin-bottom:1.5rem;background-color:var(--background-color);color:var(--text-color);transition:all .2s ease;box-shadow:var(--shadow-color) 0 1px 2px 0}#emoji-search:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.category-filter{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.category-btn{padding:.625rem 1.25rem;border:1px solid var(--border-color);border-radius:9999px;background:var(--background-color);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease}.category-btn:hover{background-color:var(--hover-color);color:var(--text-color);border-color:var(--text-color)}.category-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1.25rem;margin-bottom:2.5rem}.emoji-item{display:flex;flex-direction:column;align-items:center;padding:1.25rem;border:1px solid var(--border-color);border-radius:16px;cursor:pointer;transition:all .2s ease;background:var(--background-color)}.emoji-item:hover{transform:translateY(-2px);box-shadow:var(--card-shadow);border-color:var(--primary-color)}.emoji-item span{font-size:2.5rem;margin-bottom:.75rem}.emoji-item p{font-size:.875rem;text-align:center;color:var(--text-secondary);font-weight:500}.emoji-preview{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background-color:var(--background-color);padding:1.25rem 2rem;border-radius:16px;box-shadow:var(--card-shadow);display:none;border:1px solid var(--border-color)}.preview-content{display:flex;align-items:center;gap:1.5rem}#preview-emoji{font-size:3rem}.preview-details{margin-right:1.5rem}.preview-details p{color:var(--text-secondary);font-size:.875rem;margin-bottom:.25rem}.preview-details p:first-child{color:var(--text-color);font-weight:600;font-size:1rem}.copy-btn{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .3s ease}.copy-btn:hover{background-color:#45a049}.copy-btn.copied{background-color:#2196f3}.copy-btn i{margin-right:5px}.recent-emojis{margin-bottom:3rem}.recent-emojis h2{margin-bottom:1.25rem;color:var(--text-color);font-size:1.5rem;font-weight:600}.emoji-copy-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#4caf50;color:#fff;padding:12px 24px;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2);z-index:9999;font-size:14px;animation:fadeInOut 2s ease-in-out}.emoji-copy-notification.error{background-color:#f44336}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,20px)}15%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-20px)}}@media (max-width:768px){.container{padding:1.5rem 1rem}.emoji-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.emoji-item span{font-size:2rem}.emoji-preview{width:90%;padding:1rem}.preview-content{flex-direction:column;text-align:center;gap:1rem}.preview-details{margin-right:0}}