.masonry-container {
      column-count: 4;
      column-gap: 15px;
      max-width: 1200px;
      margin: 0 auto;
      margin-bottom: 50px;
    }
    .box {
      position: relative;
      overflow: hidden;
      background: #fff;
      margin-bottom: 15px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,.08);
      break-inside: avoid;
      cursor: pointer;
      opacity: 0;
      transform: translateY(30px);
      animation: boxAppear .7s ease forwards;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .box:nth-child(1){animation-delay:.05s}.box:nth-child(2){animation-delay:.1s}
    .box:nth-child(3){animation-delay:.15s}.box:nth-child(4){animation-delay:.2s}
    .box:nth-child(5){animation-delay:.25s}.box:nth-child(6){animation-delay:.3s}
    .box:nth-child(7){animation-delay:.35s}.box:nth-child(8){animation-delay:.4s}
    .box:nth-child(9){animation-delay:.45s}.box:nth-child(10){animation-delay:.5s}
    .box:nth-child(11){animation-delay:.55s}.box:nth-child(12){animation-delay:.6s}
    @keyframes boxAppear {
      from { opacity:0; transform:translateY(30px) scale(.96); }
      to { opacity:1; transform:translateY(0) scale(1); }
    }
    .box:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 15px 30px rgba(0,0,0,.18);
    }
    .box img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease;
    }
    .box:hover img {
      transform: scale(1.08);
      filter: brightness(.75);
    }
    .image-overlay {
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,0);
      transition:background .4s ease;
    }
    .box:hover .image-overlay { background:rgba(0,0,0,.25); }
    .zoom-icon {
      width:55px;height:55px;
      display:flex;align-items:center;justify-content:center;
      border-radius:50%;
      background:rgba(255,255,255,.9);
      font-size:25px;
      opacity:0;
      transform:scale(.5);
      transition:opacity .3s ease, transform .3s ease;
    }
    .box:hover .zoom-icon { opacity:1; transform:scale(1); }

    .modal {
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:30px;
      background:rgba(0,0,0,.92);
      opacity:0;
      visibility:hidden;
      transition:opacity .35s ease, visibility .35s ease;
    }
    .modal.active { opacity:1; visibility:visible; }
    .modal-content {
      position:relative;
      max-width:90vw;
      max-height:90vh;
      display:flex;
          background: #00000000;
      align-items:center;
      justify-content:center;
    }
    .modal-image {
      max-width:85vw;
      max-height:85vh;
      object-fit:contain;
      border-radius:8px;
      box-shadow:0 20px 60px rgba(0,0,0,.5);
      user-select:none;
      animation:modalImageIn .4s ease;
    }
    @keyframes modalImageIn {
      from { opacity:0; transform:scale(.8); }
      to { opacity:1; transform:scale(1); }
    }
    .close-btn,.nav-btn {
      position:fixed;
      border:none;
      color:#fff;
      background:rgba(255,255,255,.15);
      cursor:pointer;
      z-index:10001;
      transition:background .3s ease, transform .3s ease;
    }
    .close-btn {
      top:20px; right:25px;
      width:50px;height:50px;
      border-radius:50%;
      font-size:30px;
      line-height:1;
    }
    .close-btn:hover { background:rgba(255,255,255,.3); transform:rotate(90deg); }
    .nav-btn {
      top:50%;
      transform:translateY(-50%);
      width:60px;height:60px;
      border-radius:50%;
      font-size:38px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .nav-btn:hover { background:rgba(255,255,255,.3); }
    .prev-btn { left:25px; }
    .next-btn { right:25px; }
    .prev-btn:hover { transform:translateY(-50%) translateX(-5px); }
    .next-btn:hover { transform:translateY(-50%) translateX(5px); }
    .image-counter {
      position:fixed;
      bottom:25px; left:50%;
      transform:translateX(-50%);
      color:#fff;
      font-size:15px;
      background:rgba(0,0,0,.4);
      padding:8px 15px;
      border-radius:20px;
      z-index:10001;
    }
    @media (max-width:900px) { .masonry-container{column-count:3;} }
    @media (max-width:600px) {
      body{padding:10px}
      .masonry-container{column-count:2}
      .modal{padding:15px}
      .modal-image{max-width:90vw;max-height:80vh}
      .nav-btn{width:45px;height:45px;font-size:28px}
      .prev-btn{left:10px}.next-btn{right:10px}
      .close-btn{width:42px;height:42px;top:10px;right:10px;font-size:25px}
    }
    @media (max-width:400px) {
      .masonry-container{column-count:1}
      .nav-btn{width:40px;height:40px;font-size:24px}
    }
    @media (prefers-reduced-motion:reduce) {
      .box{animation:none;opacity:1;transform:none}
      *{transition-duration:.01ms!important}
    }