/* 拾影：拍立得照片墙 + 点开后的详情；颜色跟皮肤走 */
.gallery-page { --gk: var(--font-cn, "Noto Serif SC", "Songti SC", serif); --gd: "Cormorant Garamond", Georgia, serif; --gs: "Noto Serif SC", "Songti SC", serif; }
.gallery-page::before { content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none; filter: blur(50px);
  background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--nc-accent-soft) 90%, transparent), transparent 45%), radial-gradient(circle at 92% 55%, color-mix(in srgb, var(--nc-accent) 20%, transparent), transparent 42%); }
.gallery-page > * { position: relative; z-index: 1; }
.gallery-page .wan-title { font: 400 16px/1 var(--gs); letter-spacing: .2em; }
.gallery-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; width: min(100%, 560px); align-self: center; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
.gallery-body button { all: unset; cursor: pointer; box-sizing: border-box; }
.gallery-body button:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 3px; border-radius: 6px; }
.gl-hero h2 { margin: 6px 4px 0; font: 400 23px/1.3 var(--gk); letter-spacing: .14em; color: var(--nc-text); }
.gl-hero p { margin: 8px 4px 0; font: italic 400 14px/1.4 var(--gd); color: var(--nc-muted); }
.gl-count { display: flex; justify-content: space-between; margin: 22px 4px 0; font: 500 9.5px/1 var(--gd); letter-spacing: .3em; text-transform: uppercase; color: var(--nc-muted); }
.gl-empty { margin: 40px 10px; text-align: center; font: 400 14px/1.9 var(--gk); color: var(--nc-muted); }
.gl-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; padding: 22px 4px 0; }
@media (min-width: 520px) { .gl-wall { grid-template-columns: repeat(3, 1fr); } }
.gallery-body .gl-pol { position: relative; display: block !important; padding: 8px 8px 11px !important; background: #fffdfa; transform: rotate(var(--r, 0deg)); transition: transform .3s ease;
  box-shadow: 0 10px 18px -12px rgba(40,30,30,.45), 0 1px 2px rgba(40,30,30,.1); }
.gallery-body .gl-pol:active { transform: rotate(0deg) translateY(-2px); }
.gallery-body .gl-pol::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 16px; margin-left: -27px; transform: rotate(var(--tr, -3deg)); opacity: .8;
  background: color-mix(in srgb, var(--nc-accent) 40%, #fff); }
.gl-ph { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: color-mix(in srgb, var(--nc-accent-soft) 70%, #fff); }
.gl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease; }
.gl-ph img.ok { opacity: 1; }
.gallery-body .gl-pol .gl-tt { display: block; margin-top: 9px; font: 400 14px/1.3 var(--gk); letter-spacing: .05em; text-align: center; color: #3a3632; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-body .gl-pol .gl-dt { display: block; margin-top: 4px; font: italic 400 11px/1 var(--gd); color: #8f877f; text-align: center; }
.gl-pol.pending .gl-tt { color: #a39a92; font-size: 12.5px; }
.gl-who { position: absolute; right: 12px; top: 12px; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.82); font: 500 9px/1 var(--gd); letter-spacing: .14em; color: var(--nc-accent); }

/* 详情：盖在照片墙上的一层 */
.gl-detail { position: fixed; inset: 0; z-index: 240; display: flex; flex-direction: column; background: color-mix(in srgb, var(--nc-bg) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.gl-detail[hidden] { display: none; }
.gl-detail-head { display: flex; justify-content: flex-end; padding: calc(env(safe-area-inset-top) + 12px) 14px 4px; }
.gl-detail-head button { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; font: 300 26px/1 var(--gd); color: var(--nc-muted); }
.gl-detail-body { flex: 1; min-height: 0; overflow-y: auto; width: min(100%, 520px); align-self: center; padding: 4px 20px calc(30px + env(safe-area-inset-bottom)); }
.gl-big { padding: 10px 10px 14px; background: #fffdfa; transform: rotate(-1.2deg); box-shadow: 0 14px 24px -14px rgba(40,30,30,.45); }
.gl-big .gl-bigph { display: block; background: #f6f2ec center / cover no-repeat; }
.gl-big img { display: block; width: 100%; max-height: 62vh; min-height: 160px; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.gl-big img.ok { opacity: 1; }
.gl-big .gl-tt { margin: 12px 0 0; text-align: center; font: 400 18px/1.3 var(--gk); letter-spacing: .1em; color: #3a3632; }
.gl-meta { display: flex; justify-content: center; gap: 10px; margin: 16px 0 0; font: italic 400 12px/1 var(--gd); color: var(--nc-muted); }
.gl-imp { position: relative; margin-top: 18px; padding: 14px 16px 12px 18px; background: #fffdf8; transform: rotate(.6deg); box-shadow: 0 6px 12px -8px rgba(60,40,30,.3); }
.gl-imp::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--nc-accent); }
.gl-imp b, .gl-seen b { display: block; margin-bottom: 6px; font: 500 9.5px/1 var(--gd); letter-spacing: .26em; text-transform: uppercase; }
.gl-imp b { color: var(--nc-accent); }
.gl-imp p { margin: 0; font: 400 15px/1.75 var(--gk); letter-spacing: .04em; color: #3a3632; white-space: pre-wrap; }
.gl-seen { margin-top: 18px; padding: 0 4px; }
.gl-seen b { color: var(--nc-muted); }
.gl-seen p { margin: 0; font: 400 12.5px/1.75 var(--gs); color: var(--nc-muted); white-space: pre-wrap; }
.gl-acts { display: flex; gap: 10px; margin-top: 22px; }
.gl-acts button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 11px 0; border-radius: 999px; font: 400 13px/1 var(--gs); letter-spacing: .1em; color: var(--nc-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc-accent) 35%, transparent); }
.gl-acts button.go { background: var(--nc-accent); color: #fff; box-shadow: 0 8px 16px -10px var(--nc-accent); }
.gl-acts button.del { flex: .6; color: var(--nc-muted); }