
	:root{
	  --gap: 14px;
	  --radius: 14px;
	  --shadow: 0 4px 14px rgba(20, 30, 60, .08);
	  --shadow-hover: 0 12px 30px rgba(20, 30, 60, .18);
	  --text: #1f2430;
	  --muted: #8b93a7;
	  --bg: #f5f7fb;
	  --brand: #2f6fed;
	}
	
	*{ box-sizing: border-box; }
	
	body{
	  margin: 0;
	  padding: 48px 24px 72px;
	  background: var(--bg);
	  color: var(--text);
	  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB",
	               "Microsoft YaHei", system-ui, sans-serif;
	  -webkit-font-smoothing: antialiased;
	}
	
	/* ================= 画廊 ================= */
	.gallery{
	  max-width: 1180px;
	  margin: 0 auto;
	}
	
	.gallery__section + .gallery__section{
	  margin-top: 56px;
	}
	
	.gallery__title{
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  margin: 0 0 22px;
	  font-size: 22px;
	  font-weight: 700;
	  letter-spacing: .4px;
	}
	
	.gallery__title::before{
	  content: "";
	  width: 5px;
	  height: 22px;
	  border-radius: 3px;
	  background: linear-gradient(180deg, #5b93ff, var(--brand));
	}
	
	.gallery__title small{
	  font-size: 12px;
	  font-weight: 500;
	  letter-spacing: 1.5px;
	  text-transform: uppercase;
	  color: var(--muted);
	}
	
	.gallery__grid{
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	  gap: var(--gap);
	}
	
	/* ---------- 图片卡片（按钮） ---------- */
	.gallery__item{
	  position: relative;
	  display: block;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  border: 0;
	  font: inherit;
	  overflow: hidden;
	  border-radius: var(--radius);
	  background: #fff;
	  box-shadow: var(--shadow);
	  aspect-ratio: 1 / 1;
	  cursor: zoom-in;                /* 放大镜光标 */
	  -webkit-appearance: none;
	  appearance: none;
	  transition: transform .28s ease, box-shadow .28s ease;
	}
	
	.gallery__item img{
	  display: block;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
	}
	
	.gallery__item::after{
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent 58%);
	  opacity: 0;
	  transition: opacity .28s ease;
	  pointer-events: none;
	}
	
	.gallery__item:hover{
	  transform: translateY(-5px);
	  box-shadow: var(--shadow-hover);
	}
	
	.gallery__item:hover img{ transform: scale(1.07); }
	.gallery__item:hover::after{ opacity: 1; }
	
	.gallery__item:focus-visible{
	  outline: 2px solid var(--brand);
	  outline-offset: 3px;
	}
	
	/* ================= 灯箱 ================= */
	.lightbox{
	  position: fixed;
	  inset: 0;
	  z-index: 999;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 64px 24px;
	  background: rgba(10, 14, 24, .9);
	  -webkit-backdrop-filter: blur(6px);
	  backdrop-filter: blur(6px);
	  opacity: 0;
	  visibility: hidden;
	  overscroll-behavior: contain;
	  transition: opacity .25s ease, visibility .25s ease;
	}
	
	.lightbox.is-open{
	  opacity: 1;
	  visibility: visible;
	}
	
	.lightbox__img{
	  max-width: 100%;
	  max-height: calc(100vh - 128px);
	  border-radius: 10px;
	  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	  cursor: default;
	  user-select: none;
	  -webkit-user-drag: none;
	  transform: scale(.96);
	  transition: transform .25s ease;
	}
	
	.lightbox.is-open .lightbox__img{ transform: scale(1); }
	
	/* 关闭 / 翻页按钮 */
	.lightbox__close,
	.lightbox__nav{
	  position: absolute;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 0;
	  padding: 0;
	  color: #fff;
	  background: rgba(255, 255, 255, .14);
	  -webkit-backdrop-filter: blur(4px);
	  backdrop-filter: blur(4px);
	  border-radius: 50%;
	  cursor: pointer;
	  line-height: 1;
	  transition: background .2s ease, transform .2s ease;
	}
	
	.lightbox__close{
	  top: 20px;
	  right: 20px;
	  width: 44px;
	  height: 44px;
	  font-size: 26px;
	}
	
	.lightbox__nav{
	  top: 50%;
	  width: 48px;
	  height: 48px;
	  font-size: 30px;
	  transform: translateY(-50%);
	}
	
	.lightbox__nav--prev{ left: 18px; }
	.lightbox__nav--next{ right: 18px; }
	
	.lightbox__close:hover,
	.lightbox__nav:hover{
	  background: rgba(255, 255, 255, .3);
	}
	
	.lightbox__nav--prev:hover{ transform: translateY(-50%) scale(1.08); }
	.lightbox__nav--next:hover{ transform: translateY(-50%) scale(1.08); }
	
	.lightbox__close:focus-visible,
	.lightbox__nav:focus-visible{
	  outline: 2px solid #fff;
	  outline-offset: 2px;
	}
	
	/* 计数 */
	.lightbox__counter{
	  position: absolute;
	  bottom: 20px;
	  left: 50%;
	  transform: translateX(-50%);
	  color: rgba(255, 255, 255, .78);
	  font-size: 13px;
	  letter-spacing: 1.2px;
	  pointer-events: none;
	}
	
	/* ================= 响应式 ================= */
	@media (max-width: 640px){
	  body{ padding: 28px 14px 48px; }
	  :root{ --gap: 10px; --radius: 10px; }
	
	  .gallery__grid{
	    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
	  }
	  .gallery__title{ font-size: 18px; margin-bottom: 16px; }
	  .gallery__title::before{ height: 18px; }
	
	  .lightbox{ padding: 56px 12px; }
	  .lightbox__img{ max-height: calc(100vh - 112px); }
	  .lightbox__nav{ width: 40px; height: 40px; font-size: 24px; }
	  .lightbox__nav--prev{ left: 8px; }
	  .lightbox__nav--next{ right: 8px; }
	  .lightbox__close{ top: 12px; right: 12px; width: 38px; height: 38px; font-size: 22px; }
	}
	
	/* 尊重系统「减少动态效果」 */
	@media (prefers-reduced-motion: reduce){
	  *{ transition: none !important; animation: none !important; }
	}
