:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #101316; color: #f2f5f7; }
body { margin: 0; background: #101316; }
header { position: sticky; top: 0; z-index: 2; background: #171c21; border-bottom: 1px solid #2a333c; padding: 12px 14px; }
h1 { margin: 0; font-size: 18px; letter-spacing: 0; }
.meta { margin-top: 6px; color: #aab5bf; font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.disclaimer { margin-top: 6px; color: #c7d0d8; font-size: 12px; line-height: 1.35; max-width: 980px; }
button { background: #2b6f9f; color: white; border: 0; border-radius: 6px; padding: 8px 10px; font-weight: 700; }
button.active { background: #4d8655; }
.filter-controls { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.search-controls { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-controls label { color: #aab5bf; font-size: 12px; font-weight: 700; }
.search-input { flex: 1 1 260px; max-width: 440px; background: #0c0f12; color: #f2f5f7; border: 1px solid #3b4a55; border-radius: 6px; padding: 8px 10px; font: inherit; }
.search-input:focus { outline: 2px solid #6ab1d8; outline-offset: 1px; }
#clear-search { background: #3a4752; }
main { padding: 12px; display: grid; gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; }
.card { background: #0c0f12; border: 1px solid #29323a; border-radius: 6px; padding: 8px; min-height: 244px; display: flex; flex-direction: column; align-items: center; }
.card img { width: 112px; height: 172px; object-fit: contain; image-rendering: auto; }
.card-meta { width: 100%; margin-top: 7px; color: #d9e2e8; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.field { margin-top: 3px; }
.field-label { color: #8fbfe0; font-weight: 700; }
.empty { color: #aab5bf; padding: 20px 12px; }
.file-name { margin-top: 6px; color: #74818c; font-size: 9px; line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .card img { width: 128px; height: 196px; } }