/* ---------------- SFX library ---------------- */
.sfx-btn { width: 100%; padding: 11px; border-radius: 12px; border: 1px solid rgba(34, 211, 238, .55); background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .15)); color: #fff; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
#sfxlib { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 250px 1fr; background: #0b0a10; color: #e9e7f2; font-family: Inter, sans-serif; }
#sfxlib[hidden] { display: none; }
.sx-side { padding: 14px; border-right: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.sx-logo { font: 900 20px Montserrat, sans-serif; padding: 6px 12px 12px; }
.sx-logo b { background: linear-gradient(90deg, #67e8f9, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .06); color: #fff; margin-bottom: 8px; }
.sx-side button { text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; color: #c9c6d6; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.sx-side button i { font-style: normal; font-size: 11px; color: #77738a; }
.sx-side button:hover { background: rgba(255, 255, 255, .05); }
.sx-side button.on { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.sx-sep { margin: 12px 12px 4px; font-size: 12px; color: #77738a; }
.sx-close { margin-top: auto; border: 1px solid rgba(255, 255, 255, .12) !important; justify-content: center !important; }
.sx-main { overflow: auto; padding: 0 34px 50px; }
.sx-hero { text-align: center; padding: 44px 0 22px; background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 14px 14px; }
.sx-hero h1 { font: 900 40px Montserrat, sans-serif; letter-spacing: .03em; margin: 12px 0 8px; }
.sx-hero p { color: #8d899e; margin: 0; }
.sx-count { display: inline-block; padding: 4px 14px; border-radius: 8px; font: 700 italic 13px Inter, sans-serif; color: #111; background: linear-gradient(90deg, #67e8f9, #f0abfc); }
.sx-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; }
.sx-head h2 { font: 800 18px Montserrat, sans-serif; margin: 0; }
.sx-zip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .15); color: #fff; cursor: pointer; font-weight: 600; font-size: 13px; }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sx-card { background: #14131b; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; padding: 12px; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.sx-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.sx-card canvas { width: 100%; height: 54px; display: block; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.sx-name { margin: 10px 0 8px; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; }
.sx-dur { color: #8d899e; font-weight: 400; font-size: 12px; }
.sx-btns { display: flex; gap: 8px; }
.sx-btns button { flex: 1; padding: 8px; border-radius: 9px; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; }
.sx-play { background: #2a2540; color: #fff; }
.sx-play.on { background: linear-gradient(135deg, #8b5cf6, #22d3ee); }
.sx-dl { background: rgba(255, 255, 255, .08); color: #e5e3ee; }
.sx-empty { color: #8d899e; }