:root{ --bg:#0b0b0b; --fg:#eaeaea; --muted:#a0a0a0; --card:#161616; --border:#262626; --accent:#e54; }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--fg) }
.site-header{ padding:24px 16px 8px; max-width:1200px; margin:0 auto }
.site-header h1{ margin:0 0 4px; font-size:28px }
.tagline{ margin:0 0 12px; color:var(--muted) }
.controls{ display:flex; gap:12px; align-items:center }
#search{ flex:1; max-width:420px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#111; color:var(--fg) }
.count{ color:var(--muted); font-size:14px }
.grid{ max-width:1200px; margin:16px auto 48px; padding:0 16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px }
.card{ display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:inherit; transition:border-color .12s ease, box-shadow .12s ease }
.card:hover{ border-color:#2f2f2f; box-shadow:0 1px 6px rgba(0,0,0,.18) }
.card .thumb{ display:block; text-decoration:none; color:inherit }
.card img{ width:100%; height:auto; display:block; border-radius:8px; background:#0e0e0e }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background:#1b1b1b; border:1px solid var(--border); color:var(--muted); cursor:pointer }
.tag:hover{ border-color:#343434; color:#d2d2d2 }
.tag.active{ background:#232323; border-color:#454545; color:#f0f0f0 }
.filters{ display:flex; flex-wrap:wrap; gap:6px; padding-top:8px }
.clear-filters{ font-size:12px; padding:4px 10px; border-radius:999px; background:transparent; color:#bbb; border:1px dashed #3a3a3a; cursor:pointer }
.clear-filters:hover{ color:#fff; border-color:#555 }
.error{ padding:16px; color:#ffb4b4 }