:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.35}
body{max-width:95%;margin:10px auto;padding:0 10px;color:#111}
header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:150px}
input[type="search"]{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:16px}
select{padding:8px;border-radius:2px;border:1px solid #ddd}
.controls{display:flex;gap:8px;align-items:center}
.meta{color:#666;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.card{border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.thumb{display:block;width:100%;height:140px;object-fit:cover;background:#f3f3f3}
.card-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:6px}
.title{font-weight:600;font-size:15px}
.title .hl{background:linear-gradient(90deg,#fffb91,#ffd28a);padding:0 2px;border-radius:2px}
a.link-url{color:#0066cc;font-size:13px;word-break:break-all}
.pager{margin-top:18px;display:flex;gap:8px;align-items:center;justify-content:center}
button{padding:8px 10px;border-radius:2px;border:1px solid #ddd;background:#fafafa;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.per-page{font-size:13px;color:#444}
.status{margin-top:6px;color:#444;font-size:14px}
@media (max-width:480px){.thumb{height:110px}}
header {display: flex;flex-direction: column;gap: 12px;margin-bottom: 18px;align-items: stretch;}
.header-top { width: 100%; }
.selects {display: flex;gap: 8px;align-items: center;flex-wrap: wrap;}
.search-row {display: flex;gap: 8px;align-items: center;justify-content: flex-end;width: 100%;}
.search {flex: 0 1 260px;min-width: 0;box-sizing: border-box;}
input[type="search"] {width: 100%;padding: 10px;border-radius: 8px;border: 1px solid #ddd;font-size: 16px;}
@media (max-width: 480px) {.selects { gap: 6px; }
.search-row { justify-content: stretch; }
.search { flex: 1 1 100%; }}
.visually-hidden {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }}