*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface-hover:#242424;--border:#2a2a2a;--text:#e5e5e5;--text-dim:#888;--accent:#7c5cff;--accent-hover:#9b7eff;--radius:12px;--radius-sm:8px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}header{text-align:center;margin-bottom:2.5rem}h1{letter-spacing:-.02em;margin-bottom:.5rem;font-size:1.8rem;font-weight:700}.subtitle{color:var(--text-dim);font-size:.95rem}.search-section{flex-direction:column;gap:1rem;margin-bottom:2rem;display:flex}.input-row{gap:.75rem;width:100%;max-width:600px;margin:0 auto;display:flex}.input-wrapper{flex:1;position:relative}.input-wrapper input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);outline:none;padding:.75rem 2.5rem .75rem 1rem;font-size:.95rem;transition:border-color .2s}.input-wrapper input:focus{border-color:var(--accent)}.input-wrapper input::placeholder{color:var(--text-dim)}.btn{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:background .2s}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.emoji-search{width:100%;max-width:600px;margin:0 auto}.emoji-search input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);outline:none;padding:.65rem 1rem;font-size:.9rem;transition:border-color .2s}.emoji-search input:focus{border-color:var(--accent)}.emoji-search input::placeholder{color:var(--text-dim)}.status-bar{text-align:center;min-height:1.5rem;margin-bottom:1.5rem}.status{background:var(--surface);color:var(--text-dim);border-radius:20px;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.85rem;display:inline-flex}.status.error{color:#ff6b6b}.status.success{color:#51cf66}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.info-badge{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);border-radius:20px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.3rem .7rem;font-size:.8rem;display:inline-flex}.info-badge .dot{border-radius:50%;width:8px;height:8px}.info-badge .dot.mastodon{background:#6364ff}.info-badge .dot.misskey{background:orange}.category-nav{scrollbar-width:thin;scrollbar-color:var(--border) transparent;z-index:10;background:var(--bg);gap:.4rem;margin-bottom:1rem;padding:.75rem 0;display:flex;position:sticky;top:0;overflow-x:auto}.category-nav::-webkit-scrollbar{height:4px}.category-nav::-webkit-scrollbar-track{background:0 0}.category-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.category-nav-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;border-radius:20px;flex-shrink:0;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.8rem;transition:all .15s;display:inline-flex}.category-nav-btn:hover{background:var(--surface-hover);color:var(--text)}.category-nav-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.category-nav-btn .nav-count{opacity:.6;font-size:.7rem}.category-section{margin-bottom:2rem;scroll-margin-top:3.5rem}.category-header{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;display:flex}.category-header h2{font-size:1rem;font-weight:600}.category-header .count{color:var(--text-dim);background:var(--surface);border-radius:10px;padding:.15rem .5rem;font-size:.8rem}.emoji-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;display:grid}.emoji-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;transition:all .15s;display:flex;position:relative}.emoji-card:hover{background:var(--surface-hover);border-color:var(--accent);transform:translateY(-2px)}.emoji-card img{object-fit:contain;width:36px;height:36px}.emoji-card .name{color:var(--text-dim);text-align:center;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;font-size:.7rem;line-height:1.2;display:-webkit-box;overflow:hidden}.emoji-card .aliases{color:var(--text-dim);text-align:center;opacity:.6;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.6rem;overflow:hidden}.emoji-card:hover .aliases{opacity:1}.emoji-card .copied-toast{border-radius:var(--radius-sm);color:#fff;opacity:0;pointer-events:none;background:#7c5cffe6;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;transition:opacity .15s;display:flex;position:absolute;inset:0}.emoji-card.copied .copied-toast{opacity:1}.empty-state{text-align:center;color:var(--text-dim);padding:4rem 2rem}.empty-state .icon{margin-bottom:1rem;font-size:3rem}.empty-state p{font-size:.95rem}.stats{text-align:center;color:var(--text-dim);margin-bottom:1.5rem;font-size:.85rem}footer{text-align:center;color:var(--text-dim);border-top:1px solid var(--border);margin-top:3rem;padding:2rem 0;font-size:.8rem}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=640px){.input-row{flex-direction:column}.btn{width:100%}.emoji-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.emoji-card img{width:28px;height:28px}}