:root { 
    --primary: #0ea5e9; 
    --bg: #ffffff; 
    --accent-yellow: #facc15; 
    --accent-green: #22c55e; 
}
body { background: var(--bg); font-family: 'Segoe UI', Tahoma, sans-serif; overflow-x: hidden; }

.navbar { background: #fff; border-bottom: 2px solid #f1f5f9; padding: 12px 0; }
.navbar-brand { font-weight: 800; color: var(--primary) !important; font-size: 1.6rem; cursor: pointer; text-decoration: none; }
.cat-dropdown-btn { background: var(--accent-yellow); color: #000; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; }

.search-section { background: #fdfdfd; padding: 40px 0; border-bottom: 1px solid #f1f5f9; }
.search-box { 
    max-width: 550px; margin: 0 auto; border: 2px solid var(--primary); 
    border-radius: 50px; display: flex; background: #fff; overflow: hidden;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.1);
}
.search-box input { border: none; padding: 12px 25px; width: 100%; outline: none; font-size: 1.1rem; }
.search-box button { background: var(--primary); color: #fff; border: none; padding: 0 25px; font-weight: 600; }

#galleryView { padding: 30px 0; }
.masonry-grid { column-count: 3; column-gap: 20px; }
@media (max-width: 992px) { .masonry-grid { column-count: 2; } }
@media (max-width: 576px) { .masonry-grid { column-count: 2; column-gap: 12px; } }

.photo-card { 
    break-inside: avoid; margin-bottom: 20px; border-radius: 12px; 
    overflow: hidden; cursor: pointer; transition: 0.4s ease; 
    border: 1px solid #f1f5f9; background: #fafafa;
}
.photo-card:hover { transform: translateY(-8px); box-shadow: 0 15px 25px rgba(0,0,0,0.1); }
.photo-card img { width: 100%; display: block; object-fit: cover; }

#downloadPage { display: none; padding: 40px 0; min-height: 100vh; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; margin-bottom: 25px; padding: 10px 20px; border-radius: 10px; background: #f1f5f9; transition: 0.3s; }
.back-btn:hover { background: var(--accent-yellow); }

.dl-img-container { 
    border-radius: 12px; overflow: hidden; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.08); 
    background: #fff; max-width: 450px; margin: 0 auto; border: 1px solid #e2e8f0;
}
.dl-img-container img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; display: block; }
.dl-sidebar { padding: 30px; background: #f8fafc; border-radius: 20px; border: 1px solid #e2e8f0; }
.btn-download-now { width: 100%; padding: 15px; background: var(--accent-green); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: 1.1rem; }
#loader { text-align: center; padding: 80px 0; }