/* ── HERO ── */
.lib-hero{padding:clamp(var(--s12),6vw,72px) 0 clamp(var(--s8),4vw,48px);border-bottom:1px solid var(--bds)}

/* ── CATS BAR ── */
.lib-cats-wrap{background:var(--surf);border-bottom:1px solid var(--bds);position:sticky;top:64px;z-index:50}
.lib-cats{padding:var(--s5) 0;display:flex;align-items:center;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.lib-cats::-webkit-scrollbar{display:none}
.cat-pill{font-family:var(--fb);font-size:.82rem;font-weight:500;color:var(--t2);background:none;border:1px solid var(--bds);border-radius:var(--rp);padding:6px 16px;cursor:pointer;transition:border-color 150ms,color 150ms,background 150ms;white-space:nowrap}
.cat-pill:hover{border-color:var(--bd);color:var(--t)}
.cat-pill.active{background:var(--ac);color:var(--oa);border-color:transparent}
.lib-search{display:flex;align-items:center;gap:var(--s3);margin-left:auto;flex-shrink:0}
.lib-search-wrap{position:relative}
.lib-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.lib-search-input{font-family:var(--fb);font-size:.9rem;color:var(--t);background:var(--surf);border:1px solid var(--bd);border-radius:var(--rp);padding:0 var(--s4) 0 40px;height:44px;width:280px;outline:none;transition:border-color 200ms}
.lib-search-input:focus{border-color:var(--ac)}
.lib-search-input::placeholder{color:var(--t3)}

/* ── MAIN GRID ── */
.lib-grid-section{padding:var(--s8) 0 clamp(var(--s12),6vw,72px)}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}

/* ── AUDIO CARD ── */
.acard{background:var(--surf);border:1px solid var(--bd);border-radius:var(--rxl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 280ms var(--ex),transform 280ms var(--ex);cursor:pointer}
.acard:hover{box-shadow:0 6px 28px oklch(16% 0.015 285 / 0.09);transform:translateY(-2px)}
.acard-vis{position:relative;height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.acard-vis-wave{display:flex;align-items:center;gap:3px;height:52px}
.acard-vis-bar{width:3px;border-radius:3px}
.acard-dur{position:absolute;bottom:var(--s3);right:var(--s4);font-size:.68rem;font-weight:600;color:var(--oa);background:oklch(16% 0.015 285 / 0.35);padding:2px 8px;border-radius:var(--rp);backdrop-filter:blur(4px)}
.acard-play{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--oa);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px oklch(16% 0.02 285 / 0.2);opacity:0;transform:scale(0.85);transition:opacity 180ms,transform 180ms var(--ex)}
/* acard-play shows only on playable vis hover (handled via .acard-vis--playable rule above) */
.acard-play svg{margin-left:2px}
/* acard-body as anchor — body click navigates to detail page */
a.acard-body{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.acard-body{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;flex:1}
/* Only show play button when vis area is playable */
.acard-vis--playable{cursor:pointer}
.acard-vis:not(.acard-vis--playable){cursor:default}
.acard:hover .acard-vis--playable .acard-play{opacity:1;transform:scale(1)}
.acard-tag{display:inline-flex;align-items:center;font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:var(--rp);margin-bottom:var(--s3);width:fit-content}
.acard-title{font-family:var(--fd);font-size:.82rem;font-weight:700;color:var(--t);letter-spacing:-.02em;line-height:1.4;margin-bottom:var(--s3);flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.acard-author{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.acard-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:var(--oa);flex-shrink:0}
.acard-name{font-size:.75rem;color:var(--t2);font-weight:500}
.acard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--bds)}
.acard-date{font-size:.7rem;color:var(--t3)}
.acard-actions{display:flex;align-items:center;gap:var(--s2)}
.acard-action{width:28px;height:28px;border-radius:var(--rm);background:none;border:none;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:background 120ms,color 120ms}
.acard-action:hover{background:var(--bg-s);color:var(--t)}
.acard-action.liked{color:oklch(58% 0.16 15)}

/* ── LOAD MORE ── */
.lib-more{text-align:center;padding-bottom:clamp(var(--s12),6vw,72px)}
.lib-more-btn{height:46px;padding:0 var(--s8);background:var(--surf);border:1px solid var(--bd);border-radius:var(--rp);font-family:var(--fb);font-size:.88rem;font-weight:500;color:var(--t2);cursor:pointer;transition:border-color 150ms,color 150ms}
.lib-more-btn:hover{border-color:var(--ac);color:var(--t)}

/* ── MINI PLAYER ── */
.mini-player{position:fixed;bottom:0;left:0;right:0;z-index:500;background:oklch(16% 0.018 285);border-top:1px solid oklch(24% 0.02 285);transform:translateY(100%);transition:transform 320ms var(--ex)}
.mini-player.active{transform:translateY(0)}
.mini-player-inner{display:flex;align-items:center;gap:var(--s5);height:68px;padding:0 clamp(var(--s6),4vw,80px)}
.mp-btn{width:38px;height:38px;border-radius:50%;background:var(--ac);border:none;display:flex;align-items:center;justify-content:center;color:var(--oa);cursor:pointer;flex-shrink:0;transition:background 120ms,transform 120ms}
.mp-btn:hover{background:var(--ach);transform:scale(1.05)}
.mp-btn svg{margin-left:2px}
.mp-btn.paused svg{margin-left:0}
.mp-info{min-width:0;flex-shrink:0;width:200px}
.mp-title{font-size:.82rem;font-weight:600;color:oklch(92% 0.015 285);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-author{font-size:.72rem;color:oklch(52% 0.018 285);margin-top:2px}
.mp-progress{flex:1;display:flex;align-items:center;gap:var(--s3)}
.mp-time{font-size:.72rem;color:oklch(48% 0.018 285);white-space:nowrap;flex-shrink:0}
.mp-wave{flex:1;height:32px;display:flex;align-items:center;gap:2px;cursor:pointer}
.mp-bar{width:3px;border-radius:3px;background:oklch(38% 0.02 285);flex-shrink:0;transition:background 120ms}
.mp-bar.played{background:var(--ac)}
.mp-controls{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.mp-ctrl{width:32px;height:32px;border-radius:var(--rm);background:none;border:none;display:flex;align-items:center;justify-content:center;color:oklch(52% 0.018 285);cursor:pointer;transition:color 150ms}
.mp-ctrl:hover{color:oklch(85% 0.02 285)}
.mp-close{width:28px;height:28px;border-radius:50%;background:oklch(24% 0.018 285);border:none;display:flex;align-items:center;justify-content:center;color:oklch(52% 0.018 285);cursor:pointer;flex-shrink:0;transition:background 150ms,color 150ms}
.mp-close:hover{background:oklch(28% 0.018 285);color:oklch(80% 0.02 285)}

@media(max-width:1000px){.lib-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.lib-search-input{width:180px}.mp-info{width:140px}.mp-time{display:none}}
@media(max-width:560px){.lib-grid{grid-template-columns:1fr}.mp-info{display:none}}