:root{
  --bg:#070a0f; --card:#0b121a;
  --text:#e9f0f8; --muted:#a6b6c9;
  --stroke:rgba(255,255,255,.09);
  --accent:#8b5cf6; --r:18px; --max:1200px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(7,10,15,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
  padding:14px 16px;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.brand{display:flex; gap:12px; align-items:center; cursor:pointer}
.brand__mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(139,92,246,.85), rgba(34,211,238,.55));
  color:#06101a;font-weight:900;
}
.brand__title{font-weight:900}
.brand__sub{font-size:12px;color:var(--muted)}
.input{
  width:min(420px, 60vw);
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  color:var(--text); outline:none;
}
.input:focus{border-color:rgba(139,92,246,.55); box-shadow:0 0 0 3px rgba(139,92,246,.18)}

.wrap{max-width:var(--max); margin:0 auto; padding:18px 16px 40px}
.hero{padding:22px 0 10px}
.hero h1{margin:0; font-size:38px; letter-spacing:.2px}
.hero p{margin:6px 0 0; color:var(--muted); font-size:15px}

.sectionTitle{margin:18px 0 10px; font-weight:900; font-size:16px}
.subLine{color:var(--muted); margin:-4px 0 12px; font-size:13px}

.albums{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}
.album{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  transition:transform .08s ease;
}
.album:hover{transform:translateY(-2px)}
.album img{width:100%; height:150px; object-fit:cover; display:block; filter:saturate(.95) contrast(1.02)}
.album .aMeta{padding:10px 12px; display:flex; justify-content:space-between; gap:10px}
.album .aName{font-weight:900}
.album .aCount{color:var(--muted); font-size:12px}

.grid{
  columns: 4 260px;
  column-gap:14px;
}
.card{
  break-inside:avoid;
  margin:0 0 14px;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--stroke);
  cursor:pointer;
}
.card img{width:100%; height:auto; display:block}
.card .cap{
  padding:9px 12px;
  border-top:1px solid var(--stroke);
  color:var(--muted);
  font-size:12px;
  display:flex; justify-content:space-between; gap:10px;
}

.hidden{display:none !important}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  display:none; align-items:center; justify-content:center; z-index:50;
  padding:18px;
}
.lightbox.is-open{display:flex}
.lb__img{
  max-width:min(92vw, 1400px);
  max-height:82vh;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
}
.lb__caption{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(10,14,20,.75);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:999px;
  color:rgba(255,255,255,.9); font-size:13px;
  max-width:min(92vw, 900px); text-align:center;
}
.lb__close{
  position:fixed; top:12px; right:12px;
  width:42px; height:42px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; cursor:pointer;
}
.lb__nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; cursor:pointer; font-size:28px; line-height:0;
}
.lb__prev{left:14px}
.lb__next{right:14px}