:root {
  --gallery-ink: #211f1d;
  --gallery-muted: #746e68;
  --gallery-line: #e4d9d1;
  --gallery-paper: #fffdfb;
  --gallery-soft: #f6f1ed;
  --gallery-accent: #bd5a72;
  --gallery-green: #6f9279;
  --gallery-toolbar-clearance: 0px;
}

body.gallery-lock { overflow: hidden; }
body.gallery-reordering { overflow: hidden; user-select: none; }

.gallery-trigger {
  white-space: nowrap;
  border-color: rgba(164, 190, 203, .92) !important;
  background: rgba(207, 224, 232, .9) !important;
  color: #304c5d !important;
  box-shadow: 0 8px 22px rgba(53, 83, 99, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.gallery-trigger:hover,
.gallery-trigger:focus-visible {
  background: rgba(222, 235, 241, .97) !important;
  box-shadow: 0 10px 26px rgba(53, 83, 99, .22);
  transform: translateY(-1px);
}

.gallery-page {
  overflow: hidden;
  padding: clamp(16px, 3vw, 30px) 0 30px;
}

.gallery-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 clamp(16px, 3vw, 30px) 18px;
}

.gallery-page-head p {
  margin: 0 0 3px;
  color: var(--gallery-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.gallery-page-head h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); }
.gallery-page-head h2 span { display: block; margin-top: 2px; color: var(--gallery-muted); font-size: 13px; }
.gallery-page-head > span { color: var(--gallery-muted); font-size: 11px; }

.gallery-sections { display: grid; gap: 22px; }

.gallery-section {
  min-width: 0;
  padding: 18px 0 20px;
  border-top: 1px solid var(--gallery-line);
}

.gallery-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(16px, 3vw, 30px) 12px;
}

.gallery-section-head h3 { margin: 0; color: var(--gallery-ink); font-size: 20px; }
.gallery-section-head div > span { color: var(--gallery-muted); font-size: 11px; }
.gallery-section-head button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--gallery-line);
  border-radius: 6px;
  background: #fff;
  color: var(--gallery-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.gallery-section-head button span { color: var(--gallery-muted); font-weight: 600; }
.gallery-section-head button:disabled { opacity: .42; cursor: default; }

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(142px, 22vw, 210px);
  gap: 10px;
  overflow-x: auto;
  padding: 0 clamp(16px, 3vw, 30px) 10px;
  scroll-padding-inline: clamp(16px, 3vw, 30px);
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-track-photo,
.gallery-photo {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #eee8e2;
  cursor: zoom-in;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  content-visibility: auto;
  contain-intrinsic-size: 170px 213px;
}

.gallery-track-photo img,
.gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .2s ease;
}
.gallery-track-photo:hover img,
.gallery-photo:hover img { transform: scale(1.02); }

.gallery-track-photo.cover::after,
.gallery-photo.cover::after {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #315c3a;
  content: "封面 Cover";
  font-size: 9px;
  font-weight: 800;
}

.gallery-track-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  border: 1px dashed var(--gallery-line);
  border-radius: 7px;
  color: var(--gallery-muted);
  font-size: 12px;
  text-align: center;
}

.nail-gallery-modal,
.gallery-admin-modal,
.gallery-lightbox {
  position: fixed;
  z-index: 2600;
  inset: 0 0 var(--gallery-toolbar-clearance);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(35, 31, 29, .38);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nail-gallery-modal.show,
.gallery-admin-modal.show,
.gallery-lightbox.show { display: flex; }

.nail-gallery-shell,
.gallery-admin-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--gallery-toolbar-clearance) - 24px);
  overflow: hidden;
  border: 1px solid rgba(225, 213, 204, .96);
  border-radius: 8px;
  background: var(--gallery-paper);
  box-shadow: 0 28px 90px rgba(28, 22, 19, .26);
  animation: galleryOpen .18s ease-out;
}
.nail-gallery-shell { height: min(850px, calc(100dvh - var(--gallery-toolbar-clearance) - 24px)); }
.gallery-admin-shell { height: min(880px, calc(100dvh - var(--gallery-toolbar-clearance) - 24px)); }

.nail-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--gallery-line);
  background: rgba(255, 253, 251, .98);
}
.nail-gallery-title h2 { margin: 0; color: var(--gallery-ink); font-size: 24px; }
.nail-gallery-title p { margin: 0 0 2px; color: var(--gallery-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.nail-gallery-title span { display: block; margin-top: 2px; color: var(--gallery-muted); font-size: 12px; }

.gallery-icon-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--gallery-line);
  border-radius: 999px;
  background: #fff;
  color: var(--gallery-ink);
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(33, 26, 23, .1);
  cursor: pointer;
}

.gallery-content,
.gallery-admin-editor {
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery-empty { display: grid; min-height: 280px; place-items: center; color: var(--gallery-muted); font-size: 13px; text-align: center; }

.gallery-lightbox {
  z-index: 2800;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(22, 19, 18, .76);
  touch-action: none;
}

.gallery-lightbox-stage {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  height: min(900px, 100%);
  place-items: center;
  overflow: hidden;
}

.gallery-lightbox-image {
  display: block;
  max-width: 94%;
  max-height: 90%;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .35);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  transform: translate3d(var(--gallery-x, 0), var(--gallery-y, 0), 0) scale(var(--gallery-scale, 1));
  transition: transform .15s ease-out, opacity .15s ease-out;
}
.gallery-lightbox-image.dragging { cursor: grabbing; transition: none; }
.gallery-lightbox-image.switch-in-left { animation: galleryImageFromLeft .17s ease-out; }
.gallery-lightbox-image.switch-in-right { animation: galleryImageFromRight .17s ease-out; }

.gallery-lightbox .gallery-icon-close { position: fixed; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: 12px; }
.gallery-lightbox-count {
  position: fixed; z-index: 3; top: max(17px, calc(env(safe-area-inset-top) + 5px)); left: 50%;
  min-width: 58px; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  color: var(--gallery-ink); font-size: 11px; font-weight: 800; text-align: center; transform: translateX(-50%);
}
.gallery-lightbox-nav {
  position: fixed; z-index: 3; top: 50%; display: grid; place-items: center; width: 44px; height: 50px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .36); border-radius: 999px; background: rgba(255, 255, 255, .86);
  color: var(--gallery-ink); font-size: 25px; transform: translateY(-50%); cursor: pointer;
}
.gallery-lightbox-prev { left: 12px; }
.gallery-lightbox-next { right: 12px; }
.gallery-lightbox-zoom { position: fixed; z-index: 3; right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--gallery-toolbar-clearance)); display: flex; gap: 7px; }
.gallery-lightbox-zoom button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--gallery-ink); font-size: 19px; font-weight: 800; cursor: pointer;
}

.gallery-admin-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--gallery-line);
  border-radius: 8px;
  background: #fff;
}
.gallery-admin-head { display: flex; min-width: 0; align-items: center; gap: 12px; }
.gallery-admin-head h3 { margin: 0; }
.gallery-admin-head p { margin: 3px 0 0; color: var(--gallery-muted); font-size: 11px; }
.gallery-admin-stats { display: block; margin-top: 4px; color: var(--gallery-muted); font-size: 10px; }
.gallery-edit-button {
  flex: 0 0 auto; min-height: 40px; padding: 9px 13px; border: 1px solid #282421; border-radius: 6px;
  background: #282421; color: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}

.gallery-admin-toolbar,
.gallery-admin-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gallery-admin-toolbar { align-items: flex-end; padding: 10px; border: 1px solid var(--gallery-line); border-radius: 7px; background: #faf7f4; }
.gallery-admin-category,
.gallery-admin-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-admin-toolbar button,
.gallery-admin-actions button,
.gallery-upload-button {
  min-height: 38px; padding: 8px 11px; border: 1px solid var(--gallery-line); border-radius: 6px;
  background: #fff; color: var(--gallery-ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.gallery-admin-toolbar button.active,
.gallery-admin-actions button.dark { border-color: #282421; background: #282421; color: #fff; }
.gallery-upload-button { border-color: var(--gallery-accent); background: var(--gallery-accent); color: #fff; }
.gallery-upload-button.busy { opacity: .62; pointer-events: none; }
.gallery-admin-actions { justify-content: flex-start; margin: 10px 0 0; }
.gallery-reorder-hint { margin: 9px 0 0; color: var(--gallery-muted); font-size: 10px; }
.gallery-admin-result { min-height: 20px; margin-top: 3px; color: #315c3a; font-size: 11px; font-weight: 700; }

.gallery-admin-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gallery-admin-card {
  position: relative; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--gallery-line);
  border-radius: 7px; background: #eee8e2; transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.gallery-admin-card.selected { outline: 2px solid var(--gallery-accent); outline-offset: 1px; }
.gallery-admin-card.dragging { z-index: 5; opacity: .7; transform: scale(1.04); box-shadow: 0 16px 32px rgba(40, 32, 28, .22); }
.gallery-admin-card-media { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; touch-action: pan-y; }
.gallery-admin-card-media img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.gallery-admin-check {
  position: absolute; z-index: 2; top: 7px; left: 7px; display: grid; place-items: center; width: 27px; height: 27px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(255, 255, 255, .92);
}
.gallery-admin-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gallery-accent); }
.gallery-status-pill,
.gallery-cover-mark {
  position: absolute; z-index: 2; right: 7px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800;
}
.gallery-status-pill { top: 7px; background: #fff2cf; color: #775b0b; }
.gallery-status-pill.published { background: #dff0e2; color: #315c3a; }
.gallery-cover-mark { bottom: 7px; background: rgba(255,255,255,.92); color: #315c3a; }

@keyframes galleryOpen { from { opacity: 0; transform: translateY(7px) scale(.988); } to { opacity: 1; transform: none; } }
@keyframes galleryImageFromLeft { from { opacity: .2; transform: translate3d(-42px,0,0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes galleryImageFromRight { from { opacity: .2; transform: translate3d(42px,0,0) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .gallery-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-admin-toolbar { align-items: stretch; }
  .gallery-admin-category, .gallery-admin-filter { width: 100%; }
  .gallery-admin-toolbar button { flex: 1 1 auto; }
  .gallery-upload-button { width: 100%; text-align: center; }
}

@media (max-width: 520px) {
  .hero-buttons .gallery-trigger { width: 100%; }
  .gallery-page { padding-top: 18px; }
  .gallery-page-head { align-items: center; }
  .gallery-page-head h2 { font-size: 30px; }
  .gallery-section { padding-top: 14px; }
  .gallery-section-head h3 { font-size: 18px; }
  .gallery-section-head button { min-height: 34px; padding: 6px 8px; }
  .gallery-track { grid-auto-columns: min(44vw, 168px); gap: 8px; }
  .gallery-track-empty { min-height: 180px; }

  .nail-gallery-modal,
  .gallery-admin-modal { padding: 6px; }
  .nail-gallery-shell,
  .gallery-admin-shell { width: 100%; max-height: calc(100dvh - var(--gallery-toolbar-clearance) - 12px); border-radius: 8px; }
  .nail-gallery-shell { height: calc(100dvh - var(--gallery-toolbar-clearance) - 12px); }
  .gallery-admin-shell { height: calc(100dvh - var(--gallery-toolbar-clearance) - 12px); }
  .nail-gallery-head { min-height: 58px; padding: 9px 10px; }
  .nail-gallery-title h2 { font-size: 20px; }
  .gallery-icon-close { width: 39px; height: 39px; }
  .gallery-content,
  .gallery-admin-editor { padding: 8px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-lightbox-nav { display: none; }
  .gallery-lightbox-image { max-width: 100%; max-height: 84%; }
  .gallery-lightbox-count { top: max(15px, env(safe-area-inset-top)); }

  .gallery-admin-panel { align-items: flex-start; padding: 11px; }
  .gallery-admin-head { display: block; }
  .gallery-admin-head p { max-width: 210px; }
  .gallery-edit-button { min-height: 38px; padding: 8px 10px; }
  .gallery-admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .nail-gallery-shell,
  .gallery-admin-shell,
  .gallery-lightbox-image,
  .gallery-track-photo img,
  .gallery-photo img { animation: none; transition: none; }
}