:root{
  --bg: #0f1022;
  --bg-2: #1a1a2e;
  --panel: #23233f;
  --panel-2: #2d2d44;
  --text: #e7e7ee;
  --muted: #b8b8d4;
  --accent: #9f91ff;
  --accent-2: #ff79c6;
  --ring: #6f6fff;
  --shadow: rgba(0,0,0,.35);
  --radius: 14px;
  --card-aspect: 4/3;
}

*{ box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 10% -10%, #1d1d3d 0%, var(--bg) 60%) fixed;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}

.site-header{
  display:flex; align-items:center; justify-content:center;
  padding: 18px 12px;
  background: linear-gradient(0deg, transparent, rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0; backdrop-filter: blur(8px);
  z-index: 10;
}

.galleries{
  max-width: 1200px; margin: 0 auto; padding: 24px 16px 56px;
}

.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  outline: none;
}

.card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px var(--shadow), 0 0 0 3px var(--ring);
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px var(--shadow);
}

.card-preview{
  width: 100%;
  aspect-ratio: var(--card-aspect);
  display:block;
  object-fit: cover;
  background: #1b1b31;
}

.card-body{
  padding: 14px 14px 16px;
}

.card-title{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .2px;
}

.card-desc{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

/* Skeletons */
.skeleton-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; margin-top: 18px;
}
.skeleton-card{
  height: 280px; border-radius: var(--radius);
  background: linear-gradient(90deg, #23233f 25%, #2e2e52 37%, #23233f 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position: 100% 0} 100%{background-position: 0 0} }

/* Modal */
.modal{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.modal[aria-hidden="false"]{ display: flex }

.modal-backdrop{
  position:absolute; inset:0; background: rgba(4,6,16,.84); backdrop-filter: blur(4px);
}

.modal-content{
  position: relative;
  width: min(1100px, 92vw);
  max-height: calc(100vh - 8vmin);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden;
  display:flex; flex-direction: column;
}

.close-btn{
  position:absolute; top:10px; right:10px;
  border: 1px solid rgba(255,255,255,.1);
  background: #1f1f38; color: var(--text); font-size: 18px;
  padding: 6px 10px; border-radius: 12px; cursor: pointer;
}
.close-btn:hover{ background: #29294a }

.modal-body{
  padding: 16px 18px 18px;
  overflow: auto;
}

.gallery-title{
  margin: 4px 0 10px;
}
.gallery-desc{
  margin: 0 0 16px; color: var(--muted);
}

.media-grid{
  display:flex; flex-direction: column; gap: 18px;
}
.media-row{
  display:flex; gap: 12px; justify-content:center; align-items:flex-start; flex-wrap:wrap;
}
.media-card{
  display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  max-width: 100%;
}
.media-card figure{ margin:0 }
.media{
  max-width: 100%;
  max-height: 72vh;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px var(--shadow);
  background: #111226;
}
.caption{
  font-size: .95rem; color: var(--muted); text-align: center;
}

.modal-nav{
  display:flex; justify-content: space-between; padding: 8px 12px 12px; gap: 8px;
}
.nav-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: #1f1f38;
  color: var(--text); font-size: 20px; padding: 8px 14px;
  border-radius: 10px; cursor:pointer;
}
.nav-btn:hover{ background:#2a2a4a }

/* Links */
a{ color: var(--accent); text-decoration: underline; }
a:hover{ color: #c5c5e8 }