.hero{text-align:center;padding:80px 20px;padding-bottom:30px;max-width:800px;margin:0 auto}
.hero-logo{width:150px;height:auto;margin-bottom:2rem}
.hero h1{font-size:2.2rem;margin-bottom:1rem;background:linear-gradient(to right,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:400}
.hero p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem}
.search-container{display:flex;gap:10px;max-width:600px;margin:0 auto;background:rgba(255,255,255,0.05);padding:10px;border-radius:8px;backdrop-filter:blur(10px)}
#searchInput{flex:1;padding:12px 20px;border:none;background:rgba(255,255,255,0.1);color:var(--text);border-radius:6px;font-size:1rem}
#searchInput::placeholder{color:var(--text-secondary)}
#searchButton{background:var(--accent);border:none;padding:12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--bg);transition:all 0.3s ease}
#searchButton:hover{background:#00b8e6;transform:scale(1.05)}
.gallery{padding:40px 20px;max-width:1200px;margin:0 auto}
.info-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.05);padding:15px 20px;border-radius:8px;margin-bottom:30px;backdrop-filter:blur(10px)}
.filter-group{display:flex;gap:15px}
.filter-select{background:rgba(255,255,255,0.1);border:none;color:var(--text);padding:8px 16px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;min-width:140px}
.filter-select:hover{background:rgba(255,255,255,0.15)}
.filter-select option{background:var(--bg);color:var(--text)}
.pagination{display:flex;align-items:center;gap:15px}
.page-info{color:var(--text-secondary);font-size:0.9rem}
.page-buttons{display:flex;gap:8px}
.page-btn{background:rgba(255,255,255,0.1);border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all 0.3s ease}
.page-btn:hover:not(:disabled){background:var(--accent);color:var(--bg)}
.page-btn:disabled{opacity:0.5;cursor:not-allowed}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px;margin-bottom:30px;position:relative}
.media-grid .no-results{width:100%;text-align:center;padding:2rem;background:rgba(255,255,255,0.05);border-radius:8px;color:var(--text);font-size:1rem;margin:1rem 0;grid-column:1 / -1}
.media-card{background:rgba(255,255,255,0.05);border-radius:8px;overflow:hidden;transition:transform 0.3s ease;text-decoration:none;color:var(--text);height:100%;display:flex;flex-direction:column}
.media-card:hover{transform:translateY(-5px)}
.media-card .thumbnail{width:100%;padding-top:56.25%;background-size:cover;background-position:center;background-color:rgba(255,255,255,0.1);position:relative}
.media-info{padding:15px;flex:1;display:flex;flex-direction:column}
.media-info h4{font-size:1rem;margin-bottom:5px;font-weight:300;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.media-info p{font-size:0.9rem;color:var(--text-secondary);margin-top:auto}
.pagination-bottom{text-align:center}
.load-more-btn{background:var(--accent);border:none;padding:12px 30px;border-radius:6px;color:var(--bg);font-size:1rem;cursor:pointer;transition:all 0.3s ease}
.load-more-btn:hover{background:#00b8e6;transform:scale(1.05)}
.search-info{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;color:var(--text);background:rgba(255,255,255,0.05);border-radius:8px}
.search-result-text{font-size:1rem}
.search-result-text strong{color:var(--accent);font-weight:500}
.result-count{color:var(--text) !important}
.clear-search{background:var(--accent);border:none;padding:8px 16px;cursor:pointer;color:var(--bg);border-radius:6px;font-size:0.9rem;transition:all 0.2s ease;display:flex;align-items:center;gap:8px;margin-left:15px}
.clear-search:hover{background:#00b8e6;transform:scale(1.05)}
.no-results{width:100%;text-align:center;padding:2rem;background:rgba(255,255,255,0.05);border-radius:8px;color:var(--text);font-size:1rem;margin:1rem 0}
.spinner{display:block;width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #174058;border-radius:50%;animation:spin 1s linear infinite;margin:100px auto;grid-column:1 / -1}
@keyframes spin{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@media (max-width: 768px) {
    .hero{padding:0px 20px}
    .hero-logo{width:130px;margin-bottom:1.5rem}
    .hero h1{font-size:1.8rem}
    .hero p{font-size:1rem}
    .search-container{padding:8px}
    #searchInput{padding:10px 15px}
    #searchButton{padding:10px}
    .gallery{padding:30px 15px}
    .info-bar{flex-direction:column;gap:15px;padding:15px}
    .filter-group{width:100%;flex-direction:column}
    .filter-select{width:100%}
    .media-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}
    
}