:root{
  --bg:#fafafa; --fg:#111; --muted:#767676; --border:#e4e4e4; --accent:#111;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0c0c; --fg:#eee; --muted:#8a8a8a; --border:#242424; --accent:#eee; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--bg); border-bottom:1px solid var(--border);
}
.brand{font-weight:600; font-size:17px; letter-spacing:-0.01em}
#search{
  background:transparent; border:1px solid var(--border); color:var(--fg);
  padding:8px 12px; border-radius:8px; font-size:14px; width:220px; outline:none;
}
#search:focus{border-color:var(--muted)}

#app{max-width:1400px; margin:0 auto; padding:24px}

/* Home grid of galleries */
.year-group{margin-bottom:36px}
.year-heading{
  font-size:13px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 12px 2px; font-weight:600;
}
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
}
.gallery-card{display:block; cursor:pointer}
.gallery-thumb{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  background:var(--border); display:block;
}
.gallery-meta{margin-top:8px}
.gallery-name{font-size:13.5px; font-weight:500; line-height:1.3}
.gallery-sub{font-size:12px; color:var(--muted); margin-top:2px}

.empty{padding:60px 0; text-align:center; color:var(--muted)}

/* Gallery detail */
.gallery-header{margin-bottom:20px}
.back-link{font-size:13px; color:var(--muted); display:inline-block; margin-bottom:10px}
.back-link:hover{color:var(--fg)}
.gallery-title{font-size:22px; font-weight:600; margin:0; letter-spacing:-0.01em}
.gallery-count{font-size:13px; color:var(--muted); margin-top:4px}

.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;
}
.photo-item{aspect-ratio:1/1; overflow:hidden; border-radius:6px; cursor:pointer; background:var(--border)}
.photo-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s}
.photo-item:hover img{transform:scale(1.04)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.lightbox img{max-width:92vw; max-height:88vh; object-fit:contain; user-select:none}
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:transparent; border:none; color:#fff;
  font-size:28px; cursor:pointer; padding:14px; opacity:.75;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1}
.lb-close{top:8px; right:12px; font-size:34px}
.lb-prev{left:8px; top:50%; transform:translateY(-50%); font-size:36px}
.lb-next{right:8px; top:50%; transform:translateY(-50%); font-size:36px}
.lb-caption{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:#ccc; font-size:13px;
}

@media (max-width:600px){
  .topbar{padding:12px 16px}
  #search{width:130px}
  #app{padding:16px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:6px}
}