.card-gallery-page { width:min(1440px,100%); }
.gallery-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 0; }
.gallery-toolbar select { max-width:100%; min-height:44px; padding:8px 12px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; font:inherit; }
.gallery-toolbar p { margin:0; color:var(--muted); }
.card-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:24px 18px; }
.card-gallery figure { margin:0; min-width:0; }
.card-gallery a { display:block; border-radius:8px; overflow:hidden; background:var(--panel); }
.card-gallery img { display:block; width:100%; aspect-ratio:2/3; object-fit:contain; }
.card-gallery figcaption { padding-top:8px; text-align:center; font-size:14px; }
#card-gallery-viewer { max-width:min(94vw,900px); max-height:94dvh; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); }
#card-gallery-viewer::backdrop { background:#000c; }
#card-gallery-viewer button { float:right; min-height:44px; padding:8px 16px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
#card-gallery-viewer h2 { font-size:20px; margin:8px 90px 16px 0; }
#card-gallery-viewer img { display:block; max-width:100%; max-height:76dvh; width:auto; height:auto; margin:auto; }
@media(max-width:480px) { .card-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; } .gallery-toolbar select { flex:1; min-width:0; } }