:root { --w: 1100px; }

* { box-sizing: border-box; }

body { margin:0; font-family: system-ui, Arial; background:#fafafa; color:#111; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 18px; }

h1 { margin: 10px 0 6px; font-size: 28px; }

.sub { margin: 0 0 10px; color:#444; }

.bar { display:flex; gap:10px; align-items:center; margin: 12px 0 12px; }

.bar input, .bar select {

  padding: 10px 12px; border:1px solid #ddd; border-radius: 12px; background:#fff;

}

.bar input { flex: 1; }

.meta { color:#666; font-size: 13px; margin: 10px 0 14px; }

.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; }

.card {

  background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden;

  box-shadow: 0 1px 8px rgba(0,0,0,.04);

}

.thumb { width:100%; height:180px; background:#f0f0f0; display:block; object-fit: cover; }

.metaBox { padding: 12px; display:flex; flex-direction:column; gap:8px; }

.metaBox h3 { margin:0; font-size:16px; }

.metaBox p { margin:0; color:#555; font-size:13px; line-height:1.4; min-height: 34px; }

.badges { display:flex; gap:6px; flex-wrap:wrap; }

.badge { font-size:12px; padding: 4px 8px; border:1px solid #eee; border-radius: 999px; color:#555; background:#fafafa; }

.actions { display:flex; gap:10px; align-items:center; }

.actions a {

  font-size: 13px; text-decoration:none; padding: 8px 10px; border-radius: 10px;

  border:1px solid #e6e6e6; background:#fff;

}

.actions a:hover { border-color:#ccc; }

.ad-slot {

  margin: 16px 0; padding:16px; border:1px dashed #ccc; border-radius:12px;

  text-align:center; color:#666; background:#fff;

}

.footer { margin-top: 18px; font-size: 13px; color:#666; display:flex; flex-direction:column; gap:10px; }

.links { display:flex; gap:10px; align-items:center; }

.updated { color:#777; }