body { margin: 0; font-family: sans-serif; background: #111; color: #eee; }
header { position: sticky; top: 0; background: #111; padding: 16px; border-bottom: 1px solid #222; }
h1 { margin: 0 0 10px 0; font-size: 20px; }
#q { width: 100%; max-width: 520px; padding: 10px; border-radius: 10px; border: 1px solid #333; background: #0b0b0b; color: #eee; }
#chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #333; background: #0b0b0b; padding: 6px 10px; border-radius: 999px; cursor: pointer; user-select: none; }
.chip:hover { border-color: #555; }

#gallery { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.card { cursor: pointer; border: 1px solid #222; border-radius: 12px; overflow: hidden; background: #0b0b0b; }
#viewer img {  display: block; width: auto;  height: auto;
  max-width: 92vw; max-height: 85vh; object-fit: contain;
   margin: 40px auto 10px;  border-radius: 10px;}

.card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.card .cap { padding: 8px 10px; font-size: 12px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

dialog { width: min(1100px, 95vw); border: 1px solid #333; border-radius: 14px; padding: 12px; background: #0b0b0b; color: #eee; }
dialog::backdrop { background: rgba(0,0,0,.75); }
#viewer button { padding: 8px 12px; border-radius: 10px; border: 1px solid #333; background: #111; color: #eee; cursor: pointer; }
#meta { margin-top: 10px; color: #bbb; font-size: 13px; }

.chip.active {  background: #4CBB17; border-color: #ffffff; color: #ffffff; 
   box-shadow: 0 0 12px #4CBB17;}
.filtersBtn{  margin-top: 10px;  padding: 8px 12px;  border-radius: 10px;
  border: 1px solid #333;  background: #0b0b0b;  color: #eee;
  cursor: pointer;  display: none; /* desktop default */}
@media (max-width: 600px){  .filtersBtn{ display: inline-block; }
  #chips{ display: none; } 
  body.filters-open #chips{ display: flex; }
}
#viewer {
  padding: 0;
  border: none;
  max-width: 95vw;
  max-height: 95vh;
}

#viewer::backdrop {
  background: rgba(0,0,0,.85);
}

#viewer #close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

#viewer #full {
  display: block;
  max-width: 92vw;
  max-height: 85vh;
  margin: 40px auto 10px;
}

#viewer #meta {
  color: #fff;
  padding: 0 16px 16px;
  text-align: center;
}

/* arrows */
#viewer #prev,
#viewer #next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 12px;
  z-index: 5;
  user-select: none;
}

#viewer #prev { left: 8px; }
#viewer #next { right: 8px; }