* { box-sizing: border-box; }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@keyframes slideCheckered {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}
body { font-family: 'Poppins', -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; margin: 0; padding: 20px; background-color: #667eea; background-image: 
  linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
  linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%),
  linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
  background-size: 40px 40px; background-position: 0 0; animation: slideCheckered 8s linear infinite; min-height: 100vh; }
header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
header h1 { margin: 0 0 8px 0; color: #333; font-size: 28px; }
header p { margin: 0; color: #666; font-size: 14px; }
.control-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#filter { flex: 1; min-width: 200px; padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px; transition: border-color 0.2s; }
#filter:focus { outline: none; border-color: #667eea; }
#sort { padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px; background: white; cursor: pointer; transition: border-color 0.2s; }
#sort:focus { outline: none; border-color: #667eea; }
#category { padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px; background: white; cursor: pointer; transition: border-color 0.2s; }
#category:focus { outline: none; border-color: #667eea; }
#count { font-size: 13px; color: #666; font-weight: 500; padding: 8px 12px; background: #f5f5f5; border-radius: 4px; }
#controls { background: white; padding: 16px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#status { color: #999; font-size: 13px; }
.theme-btn { padding: 8px 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 16px; background: white; cursor: pointer; transition: all 0.2s; }
.theme-btn:hover { border-color: #667eea; background: #f5f5f5; }
main { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background 0.3s; }
main.theme-light { background: white; }
main.theme-dark { background: #2a2a2a; }
#grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; margin-top: 16px; }
.card { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: #667eea; }
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.caption { padding: 10px; font-size: 12px; color: #555; word-break: break-word; line-height: 1.3; }
main.theme-dark .card { background: #3a3a3a; border-color: #4a4a4a; }
main.theme-dark .card:hover { border-color: #667eea; }
main.theme-dark .caption { color: #ccc; }
.pagination { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e0e0; }
main.theme-dark .pagination { border-top-color: #4a4a4a; }
.page-btn { padding: 8px 16px; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.page-btn:hover:not(:disabled) { background: #667eea; color: white; border-color: #667eea; }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#page-info { font-size: 13px; color: #666; font-weight: 500; min-width: 100px; text-align: center; }
main.theme-dark #page-info { color: #aaa; }
.lightbox { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; }
.lightbox-content { position: relative; background: white; border-radius: 12px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.lightbox-close { position: absolute; top: 12px; right: 12px; font-size: 32px; cursor: pointer; color: #999; z-index: 10000; background: rgba(255,255,255,0.9); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
.lightbox-close:hover { color: #333; background: white; }
#lightbox-img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.lightbox-info { padding: 12px 16px; background: #f9f9f9; border-top: 1px solid #e0e0e0; }
.lightbox-info p { margin: 4px 0; font-size: 13px; color: #555; }
.lightbox-nav { padding: 12px 16px; display: flex; gap: 8px; justify-content: center; background: #f9f9f9; }
.lightbox-nav button { padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.lightbox-nav button:hover { background: #667eea; color: white; border-color: #667eea; }
#legal { padding: 16px; margin-top: 20px; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.85); font-size: 12px; text-align: center; border-radius: 8px; line-height: 1.5; }
#legal p { margin: 0; }
/* Setup modal styles */
.setup-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 100000; }
.setup-box { background: white; width: min(900px, 95%); max-height: 85vh; overflow: auto; padding: 20px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.setup-box { background: white; width: min(900px, 95%); max-height: 85vh; padding: 20px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); display:flex; flex-direction:column; }
.setup-box h2 { margin-top: 0; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; margin: 12px 0 16px; flex: 1 1 auto; overflow: auto; padding-right: 6px; }
.category-tile { background: #f7fafc; border: 1px solid #eef2f6; padding: 10px; border-radius: 8px; display:grid; grid-template-rows: 86px auto; gap:8px; align-items:start; cursor:pointer; min-height:132px; overflow:hidden; }
.category-tile.selected { border-color: #667eea; box-shadow: 0 6px 18px rgba(102,126,234,0.18); transform: translateY(-4px); }
.category-tile .cat-name { font-weight:600; color:#0f172a; font-size:13px; text-align:center; width:100%; line-height:1.25; word-break:break-word; background:#ffffffd9; border-radius:6px; padding:5px 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.category-tile .cat-thumb { width:100%; height:100%; display:block; object-fit:cover; border-radius:6px; background:#fff; border:1px solid #e6eef9; }
.setup-actions { display:flex; gap:10px; justify-content:flex-end; position: sticky; bottom: 0; background: linear-gradient(white, rgba(255,255,255,0.98)); padding-top: 10px; padding-bottom: 6px; margin-top: 8px; }
.setup-actions .btn-light-modern { margin-left: 6px; }
@media (max-width: 1024px) {
  #grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
  body { padding: 16px; }
}
@media (max-width: 768px) {
  #grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
  .card img { height: 140px; }
  .control-row { flex-direction: column; align-items: stretch; }
  #filter, #sort, #category { width: 100%; }
  #count { width: 100%; text-align: center; }
  body { padding: 12px; }
  header { padding: 16px; }
  main { padding: 16px; }
}
@media (max-width: 480px) {
  #grid { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 8px; }
  .card img { height: 100px; }
  .caption { padding: 6px; font-size: 11px; }
  body { padding: 8px; }
  header { padding: 12px; }
  header h1 { font-size: 20px; }
  main { padding: 12px; }
  #controls { padding: 12px; }
  .category-grid { grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
  .category-tile { grid-template-rows: 66px auto; min-height:108px; padding:7px; }
  .category-tile .cat-name { font-size:11px; padding:4px; }
}