/* Dark mode theme */
:root{
  --bg: #0b0f14;
  --surface: #111827;
  --card: #131a22;
  --muted: #9ca3af;
  --text: #e5e7eb;
  --border: #1f2937;
  --accent: #60a5fa;
  --accent-2: #22d3ee;
}
body.hdfgf-no-scroll{ overflow:hidden; }

#hdfgf-app{font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; color:var(--text)}
#hdfgf-app .hdfgf-controls{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
#hdfgf-app input,#hdfgf-app select,#hdfgf-app button{padding:.55rem .7rem; border:1px solid var(--border); border-radius:.6rem; font-size:14px; background:var(--surface); color:var(--text)}
#hdfgf-app input::placeholder{color:#6b7280}
#hdfgf-app button{cursor:pointer; background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:0; color:#0b1020; font-weight:600}
#hdfgf-app button#hdfgf-reset{background:var(--surface); color:var(--text); border:1px solid var(--border)}

#hdfgf-results.hdfgf-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem}
@media (max-width: 900px){ #hdfgf-results.hdfgf-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ #hdfgf-results.hdfgf-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); } }

.hdfgf-card{border:1px solid var(--border); border-radius:.9rem; overflow:hidden; background:var(--card); display:flex; flex-direction:column; box-shadow:0 10px 25px rgba(0,0,0,.25)}
.hdfgf-thumb{aspect-ratio:1/1; overflow:hidden; background:#0f172a; display:flex; align-items:center; justify-content:center}
.hdfgf-thumb img{max-width:100%; max-height:100%; display:block; object-fit:contain; cursor:zoom-in}
.hdfgf-noimg{font-size:12px; color:var(--muted)}
.hdfgf-meta{padding:.85rem}
.hdfgf-title{font-weight:700; margin-bottom:.25rem}
.hdfgf-sub{font-size:12px; color:var(--muted); margin-bottom:.6rem}
.hdfgf-actions a{text-decoration:none; border:1px solid var(--border); padding:.4rem .65rem; border-radius:.6rem; font-size:12px; color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.hdfgf-actions a:hover{border-color:#334155}

.hdfgf-pager{display:flex; justify-content:center; margin-top:1rem}
.hdfgf-pager button{padding:.6rem 1.1rem; border:1px solid var(--border); border-radius:.6rem; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#0b1020; font-weight:700}

.hdfgf-empty{padding:1rem; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--border); border-radius:.9rem}

/* Lightbox */
.hdfgf-lightbox[aria-hidden="true"]{display:none}
.hdfgf-lightbox[aria-hidden="false"]{position:fixed; inset:0; z-index:9999; display:block}
.hdfgf-lightbox-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px);}
.hdfgf-lightbox-content{position:relative; max-width:960px; margin:5vh auto; background:var(--card); border:1px solid var(--border); border-radius:1rem; box-shadow:0 25px 60px rgba(0,0,0,.45); overflow:hidden}
.hdfgf-lb-close{position:absolute; top:.5rem; right:.6rem; border:0; background:transparent; color:var(--text); font-size:28px; line-height:1; cursor:pointer}
.hdfgf-lb-body{display:grid; grid-template-columns: 1.2fr 1fr; gap:0}
.hdfgf-lb-media{background:#0f172a; display:flex; align-items:center; justify-content:center; padding:1rem}
.hdfgf-lb-media img{max-width:100%; max-height:70vh; display:block; object-fit:contain}
.hdfgf-lb-meta{padding:1.2rem}
.hdfgf-lb-meta h3{margin:.2rem 0 .4rem; font-size:20px}
.hdfgf-lb-meta p{margin:0 0 .8rem; color:var(--muted)}
.hdfgf-lb-actions a{text-decoration:none; border:1px solid var(--border); padding:.5rem .8rem; border-radius:.6rem; color:var(--text); display:inline-block; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
@media (max-width: 900px){ .hdfgf-lb-body{grid-template-columns:1fr;} }


/* Lightbox extra metadata */
.hdfgf-lb-desc{ margin:.5rem 0 1rem; color:var(--muted); line-height:1.4 }
.hdfgf-lb-attrs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem }
.hdfgf-attr{ background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:.5rem .6rem; }
.hdfgf-attr-type{ font-size:12px; color:var(--muted); }
.hdfgf-attr-val{ font-weight:700; }
@media (max-width: 600px){ .hdfgf-lb-attrs{ grid-template-columns:1fr; } }


/* --- v0.5.4: Mobile-scrollable lightbox --- */
.hdfgf-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.6); display:none; overflow:auto; -webkit-overflow-scrolling:touch; }
.hdfgf-lightbox[aria-hidden="false"]{ display:block; }
.hdfgf-lb-dialog{ box-sizing:border-box; margin:2.5vh auto; max-width:720px; background:var(--surface); border:1px solid var(--border); border-radius:.8rem; padding:1rem; max-height:calc(100dvh - 5vh); overflow:auto; -webkit-overflow-scrolling:touch; }
@supports not (height: 100dvh){
  .hdfgf-lb-dialog{ max-height:calc(100vh - 5vh); }
}
/* Prevent background scroll when modal open */
body.hdfgf-locked, html.hdfgf-locked{ overflow:hidden; }
@media (max-width: 640px){
  .hdfgf-lb-dialog{ margin:1.5vh auto; padding:.85rem; max-height:calc(100dvh - 3vh); }
}
/* Ensure image doesn't force overflow width */
.hdfgf-lb-imgwrap{ overflow:hidden; }
.hdfgf-lb-imgwrap img{ max-width:100%; height:auto; display:block; }