.gallery-page .page-hero { padding: 2rem 0; background: linear-gradient(120deg, var(--color-surface-alt), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.gallery-page .page-hero h1 { letter-spacing: -.035em; }
.gallery-page .page-hero > .container > p:last-child { color: var(--color-muted); max-width: 640px; margin-bottom: 0; }
.gallery-body { padding: 1.5rem 0; }
.gallery-page-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.25rem; }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.album-grid > .state-block { grid-column: 1 / -1; }
.gallery-page .album-card { padding: 0; overflow: hidden; border-radius: 16px; transition: box-shadow .2s, border-color .2s; }
.gallery-page .album-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.gallery-page .album-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border-radius: 0; background: var(--color-surface-alt); }
.gallery-page .album-empty-cover { display: flex; }
.album-info { padding: 1rem 1.15rem; }
.album-date { font-size: .75rem; color: var(--color-muted); margin: 0 0 .35rem; }
.album-info h3 { font-size: 1.1rem; overflow-wrap: anywhere; }
.album-footer { display: flex; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--color-border); margin-top: .8rem; padding-top: .65rem; font-size: .8rem; color: var(--color-muted); }
.album-footer > span:last-child { color: var(--color-primary); font-weight: 700; }
.gallery-page .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.gallery-page .gallery-grid button { overflow: hidden; border-radius: 12px; background: var(--color-surface-alt); border: 1px solid var(--color-border); aspect-ratio: 4 / 3; }
.gallery-page .gallery-grid img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.gallery-page .gallery-grid button:hover { border-color: var(--color-primary); }
.gallery-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.gallery-lightbox { width: min(1100px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; }
.gallery-lightbox::backdrop { background: rgba(5, 12, 20, .88); }
.lightbox-toolbar, .lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-toolbar { margin-bottom: .8rem; font-size: .85rem; color: var(--color-muted); }
.lightbox-stage { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: .5rem; align-items: center; min-height: 200px; }
.lightbox-stage img { max-height: 65dvh; margin: auto; object-fit: contain; border-radius: 8px; }
.lightbox-arrow { height: 44px; width: 40px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-alt); color: var(--color-text); font-size: 2rem; cursor: pointer; }
.lightbox-arrow:disabled { opacity: .3; cursor: default; }
.lightbox-footer { margin-top: 1rem; }
.lightbox-footer p { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-page .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .gallery-page .page-hero { padding: 1.2rem 0; }
  .album-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .gallery-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .gallery-lightbox { width: calc(100% - 1rem); padding: .7rem; }
  .lightbox-stage { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: .3rem; }
  .lightbox-arrow { width: 32px; }
  .lightbox-footer { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .gallery-page .album-card { transition: none; } }

.gallery-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.gallery-pagination[hidden] { display: none; }