body {
      background: #0d0f23;
      font-family: 'Poppins', sans-serif;
      color: #fff;
      /* Reserve space for the fixed top navigation so content isn't hidden */
      --nav-height: 88px;
      padding-top: calc(var(--nav-height) + 12px);
    }
    .search-bar {
      background: #1b1d36;
      border-radius: 12px;
      padding: 14px 20px;
      border: 1px solid #2d2f48;
      color: #ddd;
    }
    .search-btn {
      background: #4b4df2;
      border: none;
      padding: 14px 18px;
      border-radius: 12px;
    }
    .category-btn {
      background: #1c1f3c;
      border: none;
      padding: 8px 18px;
      border-radius: 20px;
      color: #d5d8ff;
      margin-right: 8px;
    }
    .category-btn.active {
      background: #6b4efc;
    }
    .gallery-box {
      height: 200px;
      border-radius: 18px;
      background: linear-gradient(135deg, #7a5bff, #d74bff);
    }
    .gallery-box.alt {
      background: linear-gradient(135deg, #7a5bff, #ff4b8a);
    }
    /* Gallery grid styles */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1.5rem;
      align-items: start;
      margin-top: 8px;
    }
                .gallery-grid a {
                  text-decoration: none;
                  color: inherit;
                  display: block;
                  transition: transform 0.2s ease;
                }
        
                .gallery-grid a:hover {
                  transform: translateY(-4px);
                }
    .gallery-item {
      border-radius: 12px;
      overflow: hidden;
      background: #0f1222;
      box-shadow: 0 6px 18px rgba(0,0,0,0.45);
      transition: box-shadow 0.2s ease;
      }
      
      .gallery-grid a:hover .gallery-item {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }
    .gallery-item img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
    }
    .gallery-empty {
      color: #bfc4d8;
      grid-column: 1 / -1;
    }
        /* Details view styles */
        .details-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 2rem;
          align-items: start;
          margin-top: 8px;
        }
    
        .detail-card {
          background: #1b1d36;
          border-radius: 16px;
          overflow: hidden;
          border: 1px solid #2d2f48;
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
        }
    
        .detail-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
        }
    
        .detail-card-image {
          width: 100%;
          height: 280px;
          overflow: hidden;
          background: #0f1222;
        }
    
        .detail-card-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
    
        .detail-card:hover .detail-card-image img {
          transform: scale(1.05);
        }
    
        .detail-card-image a {
          display: block;
          text-decoration: none;
          color: inherit;
        }
    
        .detail-card-info {
          padding: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
        }
    
        .detail-card-title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 12px;
          color: #fff;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
    
        .detail-card-description {
          color: #bfc4d8;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 16px;
          flex: 1;
        }
    
        .detail-card-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 16px;
          padding-top: 16px;
          border-top: 1px solid #2d2f48;
        }
    
        .detail-meta-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #9aa0b8;
          font-size: 13px;
        }
    
        .detail-meta-item i {
          color: #6b4efc;
          font-size: 16px;
        }
    
        .btn-detail-view {
          background: #6b4efc;
          color: #fff;
          border: none;
          padding: 10px 16px;
          border-radius: 8px;
          font-weight: 600;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          text-decoration: none;
          transition: background 0.2s ease, transform 0.2s ease;
          margin-top: auto;
        }
    
        .btn-detail-view:hover {
          background: #5a3eeb;
          transform: translateY(-2px);
          color: #fff;
        }
    
        @media (max-width: 768px) {
          .details-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
          }
    
          .detail-card-image {
            height: 240px;
          }
        }
    .top-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(17,18,36,0.95);
      padding: 10px 0;
      display: flex;
      /* background spans full width; inner content will be centered */
      border-bottom: 1px solid #242642;
      backdrop-filter: blur(6px);
      z-index: 50;
    }
    .top-nav .nav-item {
      flex: initial;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #9aa0b8;
      font-size: 13px;
      padding: 6px 10px;
      cursor: pointer;
      transition: color .15s ease, transform .12s ease;
    }
    .top-nav .nav-item i {
      font-size: 18px;
      display: block;
      line-height: 1;
    }
    .top-nav .nav-item.active {
      color: #fff;
    }
    .top-nav .nav-item:hover { color: #fff; transform: translateY(-3px); }
    @media (min-width: 768px) {
      .top-nav .nav-item span { font-size: 14px; }
    }

    /* inner container to center nav content while keeping full-width background */
    .top-nav .nav-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      width: 100%;
      box-sizing: border-box;
    }
    .top-nav .nav-left { display: flex; align-items: center; gap: 10px; }
    .top-nav .brand h2 { margin: 0; font-size: 20px; font-weight: 700; }
    .top-nav .brand small { color: #bfc4d8; margin-left: 6px; font-size: 13px; }
    .top-nav .nav-right { display: flex; align-items: center; gap: 18px; }
    .icon-btn {
      background: #1b1d36;
      border-radius: 10px;
      padding: 10px 12px;
      border: 1px solid #2d2f48;
    }