:root { --gap:14px; --bg:#0b0b0c; --fg:#f5f5f7; --muted:#9aa0a6; --overlay:rgba(0,0,0,.9); --thumb-radius:12px; --max-col:5; }
.pm-gallery { padding:16px; }
.pm-masonry { column-count:var(--max-col); column-gap:var(--gap); }
@media (max-width:1200px){ .pm-masonry{ column-count:4 } }
@media (max-width:992px){ .pm-masonry{ column-count:3 } }
@media (max-width:768px){ .pm-masonry{ column-count:2 } }
@media (max-width:480px){ .pm-masonry{ column-count:1 } }
.pm-item{ break-inside:avoid; margin:0 0 var(--gap); position:relative; border-radius:var(--thumb-radius); overflow:hidden; background:#111; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .12s ease; }
.pm-item:hover{ transform:translateY(-1px) }
.pm-item img{ width:100%; height:auto; display:block; object-fit:cover; background:#0e0e0e }
.pm-item button{ appearance:none; border:0; background:transparent; padding:0; cursor:zoom-in; width:100% }
.pm-note{ margin:18px 16px; padding:12px 14px; background:#121316; border:1px solid #2a2c31; border-radius:10px; color:var(--muted); font-size:.95rem; line-height:1.4 }
.pm-hidden{ display:none!important }
.pm-modal{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; z-index:9999 }
.pm-modal[aria-hidden="false"]{ display:flex }
.pm-modal-inner{ max-width:96vw; max-height:92vh; position:relative }
.pm-modal img{ display:block; max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.5) }
.pm-close,.pm-prev,.pm-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:999px; width:46px; height:46px; display:grid; place-items:center; cursor:pointer; font-size:20px }
.pm-close{ top:10px; right:10px; transform:none; width:40px; height:40px; font-size:18px; background:rgba(0,0,0,.65) }
.pm-prev{ left:-60px } .pm-next{ right:-60px }
@media (max-width:768px){ .pm-prev{ left:8px } .pm-next{ right:8px } }