.sb-filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem}.sb-search{flex:1;min-width:200px;padding:.6rem 1rem;font-size:1rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;outline:none}.sb-search:focus{border-color:var(--brand)}.sb-search::placeholder{color:var(--muted)}.sb-cat{padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}.sb-cat:hover{background:var(--surface2)}.sb-cat.active{background:var(--brand);color:#fff;border-color:var(--brand)}.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;min-height:400px}.sb-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-decoration:none;color:inherit;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .15s}.sb-card:hover{box-shadow:var(--shadow-hover);border-color:var(--brand);transform:translateY(-3px)}.sb-card:active{transform:translateY(-1px)}.sb-card.playing{border-color:var(--brand)}.sb-card-hero{position:relative;height:190px;background:linear-gradient(90deg,#4a52c4,#6875f5 40%,#4a52c4);background-size:200% 100%;animation:sb-shimmer 1.4s ease-in-out infinite;overflow:hidden;flex-shrink:0}.sb-card-hero.img-loaded,.sb-card-hero.no-image{animation:none;background:linear-gradient(135deg,#5865f2,#7b5ea7)}.sb-card.playing .sb-card-hero{animation:none;background:linear-gradient(135deg,#4752c4,#6a4d94)}@keyframes sb-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.sb-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sb-card-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000047);pointer-events:none}.sb-card-hero-bg{position:absolute;inset:0;font-size:5.5rem;display:flex;align-items:center;justify-content:center;opacity:.6;user-select:none;pointer-events:none}.sb-heart-float{position:absolute;top:.6rem;right:.6rem;z-index:2;background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;color:#ffffffd9;transition:transform .15s,background .15s;line-height:1}.sb-heart-float:hover{transform:scale(1.15);background:#00000080}.sb-heart-float.faved{color:#e0245e;background:#e0245e40}.sb-card-body{padding:.85rem 1rem 1rem;flex:1;display:flex;flex-direction:column}.sb-card-cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.3rem;opacity:.9}.sb-card-name{font-weight:600;font-size:.95rem;color:var(--text);line-height:1.4;flex:1;margin-bottom:.85rem}.sb-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--border)}.sb-open-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--text2);text-decoration:none;opacity:.55;transition:opacity .15s,color .15s}.sb-open-btn:hover{opacity:1;color:var(--brand)}.sb-footer-right{display:flex;align-items:center;gap:.55rem}.sb-play-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:.8rem;cursor:pointer;flex-shrink:0;box-shadow:0 2px 10px #5865f266;transition:transform .15s,box-shadow .15s,background .15s}.sb-play-btn:hover{transform:scale(1.1);box-shadow:0 4px 16px #5865f28c}.sb-play-btn:active{transform:scale(.93)}.sb-card.playing .sb-play-btn{background:#e0245e;box-shadow:0 2px 10px #e0245e66}.sb-card.playing .sb-play-btn:hover{box-shadow:0 4px 16px #e0245e8c}.sb-empty{color:var(--muted);padding:2rem 0}.sb-pagination{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-top:2rem}.sb-page-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.4rem;border-radius:999px;border:1.5px solid var(--brand);background:transparent;color:var(--brand);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,transform .12s;font-family:inherit}.sb-page-btn:hover:not(:disabled){background:var(--brand);color:#fff;box-shadow:0 4px 16px #5865f266;transform:translateY(-1px)}.sb-page-btn:active:not(:disabled){transform:translateY(0)}.sb-page-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border);color:var(--muted)}.sb-heart{display:none}.sb-bars{display:flex;align-items:flex-end;gap:3px;height:25px;flex:1}.sb-bars span{width:3px;border-radius:2px;background:var(--border);transform-origin:bottom;transform:scaleY(.5)}.sb-bars span:nth-child(1){height:60%}.sb-bars span:nth-child(2){height:100%}.sb-bars span:nth-child(3){height:45%}.sb-bars span:nth-child(4){height:80%}.sb-bars span:nth-child(5){height:55%}.sb-bars.playing span{background:var(--brand);animation:bars .8s ease-in-out infinite;animation-fill-mode:backwards;transform:none}.sb-bars.playing span:nth-child(1){animation-delay:0s}.sb-bars.playing span:nth-child(2){animation-delay:.15s}.sb-bars.playing span:nth-child(3){animation-delay:.3s}.sb-bars.playing span:nth-child(4){animation-delay:.1s}.sb-bars.playing span:nth-child(5){animation-delay:.25s}@keyframes bars{0%,to{transform:scaleY(.3)}50%{transform:scaleY(.6)}}.usage-tips{margin:1.5rem 0;padding:1.25rem;background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border-radius:12px;border:1px solid rgba(99,102,241,.2)}.usage-tips h3{margin:0 0 .75rem;font-size:1.1rem;color:var(--text)}.usage-tips ul{margin:0;padding-left:1.25rem}.usage-tips li{margin:.5rem 0;color:var(--text2);line-height:1.5}.category-nav{margin:2rem 0;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.category-nav h3{margin:0 0 1rem;font-size:1.1rem;color:var(--text)}.category-links{display:flex;flex-wrap:wrap;gap:.5rem}.category-tag{padding:.4rem .8rem;background:var(--surface2);border:1px solid var(--border);border-radius:20px;font-size:.85rem;color:var(--text2);text-decoration:none;transition:all .2s ease}.category-tag:hover{background:var(--brand);color:#fff;border-color:var(--brand)}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.sound-card-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000d;position:relative;overflow:hidden;min-height:100px}.sound-card-mini:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),#8b5cf6);opacity:0;transition:opacity .3s ease}.sound-card-mini:hover{transform:translateY(-6px);box-shadow:0 16px 32px #6366f126;border-color:var(--brand)}.sound-card-mini:hover:before{opacity:1}.mini-icon{font-size:1.75rem;margin-bottom:.5rem;filter:grayscale(.2);transition:transform .3s ease}.mini-img{height:50px;width:50px;object-fit:cover;border-radius:8px;margin-bottom:.5rem}.sound-card-mini:hover .mini-icon{transform:scale(1.15)}.mini-name{font-size:.7rem;color:var(--text);text-align:center;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}.sound-card-mini:hover .mini-name{color:var(--brand)}.faq-section{margin:2rem 0;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.faq-section h2{margin:0 0 1.25rem;font-size:1.25rem;color:var(--text)}.faq-section h3{margin:1.25rem 0 .5rem;font-size:1rem;color:var(--text)}.faq-section p{margin:.5rem 0;color:var(--text2);line-height:1.6}.faq-section strong{color:var(--brand)}.sound-context{margin:1rem 0;padding:1rem;background:linear-gradient(135deg,#22d3ee1a,#6366f11a);border-radius:10px;border-left:4px solid var(--brand);font-size:.95rem;line-height:1.6;color:var(--text2)}.sound-context strong{color:var(--text)}.faq-item{margin:1.25rem 0;padding:1rem;background:var(--surface2);border-radius:8px}.faq-item h3{margin:0 0 .5rem;font-size:1rem;color:var(--text)}.faq-item p{margin:0;color:var(--text2);line-height:1.6}.badge.trending{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}