* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#0a0a0a; color:#e0e0e0; }
header { background:#111; padding:20px 24px; border-bottom:1px solid #222; position:sticky; top:0; z-index:10; }
header h1 { font-size:22px; margin-bottom:12px; }
header h1 span { color:#7c3aed; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.search { padding:8px 14px; border-radius:8px; border:1px solid #333; background:#1a1a1a; color:#fff; font-size:14px; width:280px; }
.cat-btn { padding:6px 16px; border-radius:20px; border:1px solid #333; background:transparent; color:#888; cursor:pointer; font-size:14px; font-weight:600; transition:all .15s; }
.cat-btn:hover { border-color:#7c3aed; color:#ccc; }
.cat-btn.active { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.tag-cloud { display:flex; gap:6px; flex-wrap:wrap; max-height:80px; overflow:hidden; transition:max-height .3s; }
.tag-cloud.expanded { max-height:none; }
.tag-btn { padding:3px 10px; border-radius:12px; border:1px solid #2a2a2a; background:#151515; color:#777; cursor:pointer; font-size:12px; transition:all .15s; }
.tag-btn:hover { border-color:#7c3aed; color:#bbb; }
.tag-btn.active { background:#7c3aed33; color:#c4b5fd; border-color:#7c3aed; }
.tag-btn small { opacity:.5; margin-left:2px; }
.active-filters { padding:8px 24px; display:none; gap:8px; flex-wrap:wrap; align-items:center; flex-direction:row; background:#111; border-bottom:1px solid #222; }
#filterPills { display:flex; gap:6px; flex-wrap:wrap; flex-direction:row; }
.active-filters.show { display:flex; }
.pill { padding:3px 10px; border-radius:12px; background:#7c3aed33; color:#c4b5fd; font-size:12px; display:flex; align-items:center; gap:4px; }
.pill .x { cursor:pointer; opacity:.6; }
.pill .x:hover { opacity:1; }
.clear-btn { color:#666; font-size:12px; cursor:pointer; margin-left:8px; }
.clear-btn:hover { color:#fff; }
.stats { padding:10px 24px; color:#555; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; padding:12px 24px 40px; }
.card { background:#141414; border-radius:10px; overflow:hidden; border:1px solid #222; transition:transform .15s,border-color .15s; }
.card:hover { transform:translateY(-2px); border-color:#7c3aed; }
.card .media { aspect-ratio:1; overflow:hidden; background:#0a0a0a; display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.card .media img, .card .media video { width:100%; height:100%; object-fit:cover; }
.card .media .play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:48px; opacity:.8; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.card .info { padding:12px; }
.card h3 { font-size:14px; margin-bottom:6px; line-height:1.3; }
.meta { display:flex; gap:6px; font-size:11px; color:#666; margin-bottom:6px; flex-wrap:wrap; }
.cat-badge { padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; }
.cat-badge.images { background:#1a1a3a; color:#a78bfa; }
.cat-badge.videos { background:#1a3a1a; color:#4ade80; }
.tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.tag { font-size:10px; background:#1a1a1a; color:#888; padding:2px 7px; border-radius:10px; cursor:pointer; transition:all .15s; }
.tag:hover { background:#7c3aed33; color:#c4b5fd; }
.actions { display:flex; gap:6px; }
.actions button,.actions a { font-size:11px; padding:3px 8px; border-radius:5px; border:1px solid #333; background:transparent; color:#888; cursor:pointer; text-decoration:none; transition:all .15s; }
.actions button:hover,.actions a:hover { background:#222; color:#fff; }
.toast { position:fixed; bottom:20px; right:20px; background:#7c3aed; color:#fff; padding:8px 16px; border-radius:8px; display:none; font-size:13px; z-index:99; }
#sentinel { height:1px; }
.loading { text-align:center; padding:20px; color:#555; font-size:14px; }