*{box-sizing:border-box}body{margin:0;font-family:Arial;color:#fff;
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url("bg2.png") center center / cover no-repeat fixed;
opacity:0;animation:pageFade 1.2s ease forwards}
h1{text-align:center;padding:30px 10px 15px}.search{text-align:center}.search input{width:340px;max-width:90%;padding:12px;border:none;border-radius:10px}
.filters{text-align:center;padding:15px}.filters button{margin:4px;padding:8px 14px;border:none;border-radius:8px;cursor:pointer}.filters .active{background:#0a84ff;color:#fff}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;max-width:1900px;margin:auto;padding:20px}
@media(max-width:1600px){.grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:1300px){.grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.grid{grid-template-columns:1fr}}
.card{position:relative;text-decoration:none;color:#fff;background:#1d1d1d;border-radius:16px;overflow:hidden;box-shadow:0 8px 20px #0008;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease;pointer-events:none}
.card.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.card:hover{transform:translateY(-4px) scale(1.025);box-shadow:0 14px 32px rgba(0,0,0,.45)}
.card img{width:100%;height:420px;object-fit:contain;background:#000;transition:transform .35s ease}
.card:hover img{transform:scale(1.04)}.card img{width:100%;height:420px;object-fit:contain;background:#000}.card h2{text-align:center;padding:18px;margin:0}.tag{position:absolute;top:12px;right:12px;background:#0a84ff;padding:6px 12px;border-radius:20px;font-weight:bold}
#noResults{display:none;text-align:center;margin:40px}
.landing{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.5s}.landing.active{min-height:0;padding-top:20px}

#backToTop{
position:fixed;right:25px;bottom:25px;width:54px;height:54px;border:none;border-radius:50%;
background:#0a84ff;color:#fff;font-size:24px;cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.35);
opacity:0;visibility:hidden;transform:translateY(15px);transition:.3s;z-index:9999}
#backToTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#backToTop:hover{transform:translateY(-3px)}
footer.site-footer{text-align:center;padding:28px 10px 22px;color:rgba(255,255,255,.35);font-size:13px;letter-spacing:1px;user-select:none}
footer.site-footer a{color:rgba(255,255,255,.35);text-decoration:none;transition:.2s}
footer.site-footer a:hover{color:rgba(255,255,255,.75)}


@keyframes pageFade{
from{opacity:0}
to{opacity:1}
}


@media(max-width:700px){
.card img{height:300px!important}
.card h2{font-size:16px;padding:12px}
.tag{font-size:12px;padding:5px 10px}
.search input{width:95%}
}
@media(max-width:480px){
.grid{grid-template-columns:repeat(2,1fr)!important;gap:10px;padding:10px}
.card{border-radius:10px}
.card img{height:180px!important}
.card h2{font-size:14px;padding:10px 6px}
.tag{font-size:10px;padding:4px 8px}
h1 img{width:150px}
h3{font-size:14px;text-align:center;padding:0 12px}
}


.site-logo{
width:220px;
max-width:70vw;
height:auto;
display:block;
margin:auto;
transition:transform .25s ease;
}
.site-logo:hover{transform:scale(1.04)}

.filters{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
padding:15px;
}
.filters button{
padding:12px 18px;
font-size:15px;
border:none;
border-radius:12px;
cursor:pointer;
min-width:110px;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

@media(max-width:700px){
.site-logo{width:180px}
.filters{gap:8px;padding:12px}
.filters button{
flex:1 1 calc(50% - 10px);
max-width:180px;
min-width:120px;
padding:14px 10px;
font-size:15px;
}
}

@media(max-width:480px){
.site-logo{width:150px}
.filters button{
flex:1 1 calc(50% - 8px);
padding:15px 8px;
font-size:14px;
border-radius:10px;
}
}


@media (max-width:700px){
    .filters{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:6px;
        padding:10px;
    }

    .filters button{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:unset !important;
        padding:8px 12px;
        font-size:13px;
        border-radius:8px;
    }

    .site-logo{
        width:170px;
    }
}

@media (max-width:480px){
    .filters{
        gap:5px;
    }

    .filters button{
        padding:7px 10px;
        font-size:12px;
    }

    .site-logo{
        width:145px;
    }
}


#roleBadge{
position:fixed;
top:20px;
left:20px;
z-index:100000;
display:none;
padding:10px 16px;
border-radius:10px;
background:#222;
color:#fff;
font-weight:bold;
border:2px solid #0a84ff;
}

#clearSearchBtn{padding:12px 16px;border:none;border-radius:10px;background:#d32f2f;color:#fff;font-weight:bold;cursor:pointer;font-size:18px}#clearSearchBtn:hover{background:#b71c1c}
#registerSuccessPopup{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:100001}
#registerSuccessPopup .box{background:#1d1d1d;color:#fff;padding:24px;border-radius:14px;max-width:360px;width:90%;text-align:center}
#registerSuccessPopup button{margin-top:16px;padding:10px 18px;border:none;border-radius:8px;background:#0a84ff;color:#fff;cursor:pointer}


/* Phone optimization for badges and logout */
@media (max-width:700px){
#roleBadge{
top:10px!important;
left:10px!important;
padding:6px 10px!important;
font-size:11px!important;
border-radius:8px!important;
max-width:120px!important;
}
#emailBadge{
top:48px!important;
left:10px!important;
padding:5px 8px!important;
font-size:10px!important;
max-width:160px!important;
border-radius:8px!important;
}
#logoutBtn{
top:10px!important;
right:10px!important;
padding:7px 10px!important;
font-size:11px!important;
border-radius:8px!important;
}
}


.filters button.locked{
opacity:.28!important;
background:rgba(120,120,120,.25)!important;
color:rgba(255,255,255,.45)!important;
border:1px solid rgba(255,255,255,.12)!important;
pointer-events:none!important;
cursor:not-allowed!important;
box-shadow:none!important;
filter:grayscale(100%);
}



#authOverlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:99999}
#authBox{background:#1d1d1d;padding:28px;border-radius:14px;width:340px;max-width:90%;text-align:center;box-shadow:0 10px 30px #000}
#authBox input{width:100%;padding:12px;border-radius:8px;border:none;margin:12px 0;font-size:16px}
#authBox button{padding:12px 18px;border:none;border-radius:8px;background:#0a84ff;color:#fff;cursor:pointer;width:100%}
#authError{color:#ff6b6b;height:20px;font-size:14px}

body.locked{overflow:hidden;}
#logoutBtn{position:fixed;top:20px;right:20px;z-index:100000;padding:10px 18px;border:none;border-radius:10px;background:#d32f2f;color:#fff;font-weight:bold;cursor:pointer;display:none}
.password-wrap{position:relative}
.password-wrap input{padding-right:44px!important}
#togglePassword{position:absolute;right:14px;top:50%;transform:translateY(-50%);cursor:pointer;user-select:none}

#emailBadge{
position:fixed;
top:72px;
left:20px;
z-index:100000;
display:none;
padding:10px 16px;
border-radius:10px;
background:#222;
color:#fff;
font-weight:bold;
border:2px solid #888;
max-width:360px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:13px;
}



#guestPopup{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;justify-content:center;align-items:center;z-index:999999}
#guestPopup .box{background:#1d1d1d;padding:24px;border-radius:14px;text-align:center;color:#fff;max-width:320px;width:90%;box-shadow:0 12px 30px #000}
#guestPopup h2{margin:0 0 12px;color:#ff5555}
#guestPopup button{margin-top:16px;padding:10px 20px;border:none;border-radius:8px;background:#0a84ff;color:#fff;cursor:pointer}