:root {
   --gap: 10px;
 }
 * {
   box-sizing: border-box;
 }
 body {
   margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   background: #0b0c0f;
   color: #e9eef3;
 }
 /*  header { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg,#0b0c0f,rgba(11,12,15,.85)); backdrop-filter: blur(6px); padding: 12px 16px; border-bottom: 1px solid #1b1f27; }*/
 header h1 {
   font-size: 16px;
   margin: 0;
   letter-spacing: .4px;
 }
 .grid {
   padding: var(--gap);
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: var(--gap);
   background-color: #dbefdc;
 }
 .tile {
   position: relative;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   border-radius: 12px;
   background: #151821;
   border: 2px solid #467729;
   cursor: zoom-in;
 }
 .tile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .25s ease;
 }
 .tile:hover img {
   transform: scale(1.03);
 }
 .tile:focus-visible {
   outline: 2px solid #6ab3ff;
   outline-offset: 2px;
   border-radius: 12px;
 }
 .badge {
   position: absolute;
   left: 8px;
   bottom: 8px;
   background: rgb(20 47 5);
   padding: 4px 8px;
   border-radius: 999px;
   font-size: 12px;
   color: #e9eef3;
 }
 .lightbox {
   position: fixed;
   inset: 0;
   z-index: 999;
   display: none;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .7);
   backdrop-filter: blur(4px);
 }
 .lightbox[aria-hidden="false"] {
   display: flex;
 }
 .lightbox__dialog {
   position: relative;
   max-width: min(95vw, 1400px);
   max-height: 90vh;
   background: #0b0c0f;
   border: 1px solid #202533;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
 }
 .lightbox__imgwrap {
   display: grid;
   place-items: center;
   background: #0f121a;
 }
 .lightbox__imgwrap img {
   max-width: 100%;
   max-height: 85vh;
   display: block;
 }
 .lightbox__bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
   gap: 8px;
   border-top: 1px solid #202533;
   background: #0b0c0f;
 }
 .btn {
   border: 1px solid #2a3142;
   background: #131725;
   color: #e9eef3;
   padding: 8px 12px;
   border-radius: 10px;
   font-size: 14px;
   cursor: pointer;
 }
 .btn:hover {
   background: #161b2c;
 }
 .btn[disabled] {
   opacity: .45;
   cursor: default;
 }
 .spacer {
   flex: 1 1 auto;
 }