/* --- Gryv Gallery — clean dark skin --- */
:root{
  --bg:#0b0e13; --bg2:#121723;
  --card:#151b28; --card-2:#0f141f;
  --text:#e6ecf5; --muted:#a7b0c0;
  --accent:#6aa9ff; --accent-2:#2d66d6;
  --ring: 0 0 0 2px rgba(106,169,255,.35), 0 10px 30px rgba(0,0,0,.45);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(45,102,214,.12), transparent 60%),
    radial-gradient(1100px 600px at -20% 120%, rgba(45,102,214,.10), transparent 60%),
    linear-gradient(135deg,var(--bg),var(--bg2));
  font: 15px/1.45 ui-sans-serif, system-ui, Segoe UI, Inter, Roboto, Helvetica, Arial, sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
.container{max-width:min(1200px,94vw); margin:28px auto; padding:0 8px}
h1,h2{margin:.2rem 0 1rem}
.page-sub{color:var(--muted)}

/* Top header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid #263149;
  background:linear-gradient(#1a2233,#141a29); color:#fff; font-weight:600;
  transition: transform .08s ease, background .2s ease;
}
.btn:hover{ background:linear-gradient(#22304a,#16203a); transform: translateY(-1px); }

/* Gallery grid */
.grid{
  display:grid; gap: clamp(12px,2vw,18px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-radius: var(--r);
  overflow:hidden; position:relative;
  border:1px solid #1c2436;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.thumb{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transform: translateZ(0);
}
.meta{
  padding:10px 12px; display:flex; flex-direction:column; gap:4px;
}
.title{font-weight:700}
.artist{
  color:var(--muted); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card:hover .thumb{ filter:brightness(1.02) saturate(1.05) }

/* SFW/NSFW section headers */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:18px 0 10px;
}
.badge{
  padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem;
  background:#263149; color:#cfe0ff; border:1px solid #2e3b5a;
}
.badge.nsfw{ background:#4a2633; color:#ffdce6; border-color:#5a2e3b }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(8,12,18,.85); backdrop-filter: blur(6px);
  z-index: 9999;
}
.lightbox.open{ display:grid; }
.lb-content{
  max-width: min(92vw, 1400px); max-height: 86vh;
  display:grid; grid-template-rows: 1fr auto; gap:12px;
}
.lb-figure{
  display:grid; place-items:center; background:#0b0f17;
  border-radius: 18px; padding:12px; border:1px solid #1e2a40;
  box-shadow: var(--ring);
}
.lb-figure img{ max-width:100%; max-height:72vh; object-fit:contain }
.lb-caption{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  color:var(--muted);
}
.credit a{ color:#cfe0ff; }
.lb-actions{ display:flex; gap:8px; }
.icon-btn{
  width:42px; height:42px; border-radius:12px; border:1px solid #263149;
  background:#141b2a; display:grid; place-items:center; cursor:pointer;
}
.icon-btn:active{ transform: translateY(1px) }

/* Small helpers */
.hidden{display:none!important}