/* Waterfall background with overlay and simple, clean card UI */

:root{
  --card-bg: rgba(255,255,255,0.85);
  --accent: #114b8a;
  --glass: rgba(255,255,255,0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&s=9c23b4e0f5b2fd9ea3f4c9c1b51711a6');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:40px;
}

/* subtle dark overlay so content is readable */
.overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(rgba(6,10,20,0.35), rgba(6,10,20,0.25));
  pointer-events:none;
  z-index:0;
  backdrop-filter: blur(2px);
}

header{
  position:relative;
  z-index:2;
  padding:1.2rem;
  text-align:center;
  color:white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
main{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin: 0 auto;
  padding: 1rem;
}

.controls{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  margin-bottom: 1.25rem;
  flex-wrap:wrap;
}

.categories{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  min-width:150px;
}

.cat-btn{
  padding:0.6rem 0.9rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.12);
  background:var(--glass);
  color:#052536;
  cursor:pointer;
  font-weight:600;
  transition: all 160ms ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.cat-btn:hover{ transform: translateY(-2px); }
.cat-btn.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,250,255,0.95));
  color: var(--accent);
  border-color: rgba(15,60,110,0.15);
  box-shadow: 0 8px 30px rgba(10,30,70,0.25);
}

.upload-panel{
  flex:1;
  background:var(--card-bg);
  padding:0.8rem;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(2,6,20,0.25);
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  min-width:280px;
}

.upload-panel input[type="file"]{
  padding:6px;
}
#upload-btn{
  background:var(--accent);
  color:white;
  border:none;
  padding:0.6rem 0.9rem;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
#upload-btn:hover{opacity:0.95}
#upload-status{
  font-size:0.9rem;
  color:#0b2540;
}

/* Gallery */
.gallery{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.8));
  padding:0.9rem;
  border-radius:12px;
  box-shadow: 0 12px 40px rgba(2,6,20,0.28);
}
.gallery h2{ margin-top:0; color:#083053 }

.photos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.photos-grid .photo-card{
  border-radius:10px;
  overflow:hidden;
  background: #f8fbff;
  box-shadow: 0 6px 18px rgba(5,18,40,0.14);
  cursor:pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.photos-grid .photo-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(5,18,40,0.2);
}
.photos-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}
.photo-meta{
  padding:8px;
  font-size:0.85rem;
  color:#083053;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* responsive */
@media (max-width:700px){
  .controls{flex-direction:column}
  .categories{flex-direction:row; gap:8px; flex-wrap:wrap}
}