* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a1a; color: #e0e0e0; }
header { padding: 1.5rem 2rem; border-bottom: 1px solid #333; display: flex; align-items: center; gap: 2rem; }
h1 { font-size: 1.5rem; }
nav a { color: #888; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; }
nav a.active, nav a:hover { color: #fff; background: #333; }
main { padding: 1.5rem 2rem; }
.filters { margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; }
.filters select { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 0.4rem; border-radius: 4px; }
#count { color: #666; font-size: 0.9rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.gallery .thumb { cursor: pointer; border-radius: 4px; overflow: hidden; aspect-ratio: 1; position: relative; }
.gallery .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.gallery .thumb:hover img { transform: scale(1.05); }
.gallery .thumb .label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); padding: 0.3rem 0.5rem; font-size: 0.75rem; }
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { display: flex; max-width: 1200px; max-height: 90vh; gap: 1.5rem; padding: 1.5rem; }
.modal-content img { max-height: 80vh; max-width: 60vw; object-fit: contain; border-radius: 4px; }
.modal-info { min-width: 300px; max-width: 400px; overflow-y: auto; }
.modal-info h3 { margin-bottom: 0.5rem; color: #aaa; font-size: 0.9rem; }
.ai-desc { margin-bottom: 1rem; line-height: 1.5; }
.field { margin-bottom: 0.75rem; }
.field label { display: block; color: #888; font-size: 0.8rem; margin-bottom: 0.2rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag { background: #2a5a3a; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; }
.tag .remove { cursor: pointer; color: #888; }
.tag .remove:hover { color: #f66; }
.close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 101; }
.small { font-size: 0.85rem; color: #888; }
select, button { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; }
button:hover { background: #3a3a3a; }
h2 { margin-bottom: 1rem; }
.person-card { background: #2a2a2a; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; cursor: pointer; }
.person-card:hover { background: #333; }
.person-card h3 { margin-bottom: 0.3rem; }
.person-card .meta { color: #888; font-size: 0.85rem; }
