:root{
  --bg: #ffffff;
  --fg: #111827;
  --muted:#6b7280;
  --accent:#1f2937;
  --gap:12px;
}
[data-theme="dark"]{
  --bg:#0b1220;
  --fg:#e6eef8;
  --muted:#9aa7b8;
  --accent:#93c5fd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--fg);}
.site-header{position:relative;z-index:1;background:var(--bg)}
.site-title{margin:0;font-weight:600;letter-spacing:0.02em}
.controls button{background:transparent;border:1px solid var(--muted);color:var(--fg);padding:6px 10px;border-radius:6px}
.gallery{column-width:300px;column-gap:var(--gap);padding:0 16px 16px}
.gallery figure{display:inline-block;width:100%;margin:0 0 var(--gap);border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#f3f4f6,#fff)}
.gallery img{width:100%;height:auto;object-fit:cover;transition:transform 200ms ease}
.gallery figure:focus-within img, .gallery figure:hover img{transform:scale(1.02)}
figure button{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer}
/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000;background:rgba(0,0,0,0.95)}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
#lightbox-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.9);border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;z-index:1001;line-height:1}
/* Layout: left sidebar, main content, right index */
.layout{display:grid;grid-template-columns:200px 1fr 72px;gap:16px;align-items:start;padding:8px 16px}
.sidebar-groups{position:sticky;top:92px;align-self:start}
.sidebar-groups ul ul {
  margin-left: 1em;
  border-left: 2px solid var(--muted);
  padding-left: 0.5em;
}
.index-nav{position:sticky;top:92px;align-self:start}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar-groups{position:static;display:flex;gap:8px;overflow:auto;padding:8px 0}
  .index-nav{display:none}
}

/* Make sure header & filter stay in flow */
.site-header{position:relative;z-index:1}
.group-filter{position:relative;z-index:1;margin:0 16px 8px}

/* Ensure the masonry gallery uses available width */
.gallery{column-width:300px;column-gap:var(--gap);padding:0 16px 16px}
@media (max-width:560px){
  .gallery{gap:8px;padding:8px}
}
.group-filter{position:relative;z-index:1400;display:flex;gap:8px;padding:12px 16px;overflow:auto}
.group-filter .group-btn{background:transparent;border:1px solid var(--muted);color:var(--fg);padding:6px 10px;border-radius:999px;cursor:pointer}
.group-filter .group-btn.active{background:var(--accent);color:#fff;border-color:transparent}
.index-nav{position:sticky;top:92px;align-self:start}
.index-nav button{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,0.1);background:rgba(255,255,255,0.9);font-size:12px;cursor:pointer}
.index-nav button.active{background:var(--accent);color:#fff;border-color:transparent}
.sidebar-groups{position:sticky;top:92px;align-self:start}
.sidebar-groups .sidebar-btn{background:transparent;border:0;padding:0;cursor:pointer}
.sidebar-groups .sidebar-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;display:block}
.sidebar-groups .sidebar-btn.active{color:var(--accent)}
@media (max-width:900px){
  .sidebar-groups{display:none}
}

/* Sub-navigation for subgroups */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--muted);
}
.subnav-link {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.subnav-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.subnav-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}