/* Gallery · 共享相册 · fullscreen */
.gallery-sheet{
  position:fixed; inset:0; z-index:270;
  display:flex; flex-direction:column;
  background:#fff;
  color:var(--text);
  opacity:0; transform:translateY(10px);
  transition:opacity .24s ease, transform .28s cubic-bezier(.22,.8,.24,1);
  overflow:hidden;
}
.gallery-sheet.open{ opacity:1; transform:none; }
.gallery-sheet.open.swiping{ transition:none; }
.gallery-sheet[hidden]{ display:none !important; }

.gallery-top{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) max(14px, calc(50vw - 205px)) 10px;
  border-bottom:1px solid rgba(20,28,40,.06);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.gallery-top h1{
  margin:0; font-size:17px; font-weight:650; letter-spacing:.02em;
}
.gallery-iconbtn{
  width:38px; height:38px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:rgba(255,255,255,.72);
  color:rgba(40,48,60,.78);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(20,28,40,.06);
  font:inherit; font-size:22px; line-height:1;
}
.gallery-iconbtn svg{ width:18px; height:18px; }

.gallery-scroll{
  flex:1; min-height:0; overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px max(12px, calc(50vw - 205px)) calc(28px + env(safe-area-inset-bottom));
}

.gallery-empty{
  margin-top:48px; text-align:center;
  color:var(--text-dim); font-size:13px; line-height:1.65;
}

.gallery-grid{
  column-count:2; column-gap:10px;
}
.gallery-tile{
  break-inside:avoid; margin:0 0 10px;
  border:0; padding:0; width:100%;
  background:transparent; cursor:pointer;
  text-align:left; font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.gallery-tile img{
  width:100%; display:block; border-radius:14px;
  object-fit:cover; background:rgba(20,28,40,.04);
}
.gallery-tile--0 img{ max-height:190px; }
.gallery-tile--1 img{ max-height:230px; }
.gallery-tile--2 img{ max-height:260px; }
.gallery-tile--3 img{ max-height:210px; }
.gallery-tile--4 img{ max-height:290px; }
.gallery-tile span{
  display:block; margin-top:6px; padding:0 2px;
  font-size:12px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.gallery-viewer{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column;
  background:#fff;
  color:#1a1f28;
  transition:transform .28s cubic-bezier(.22,.8,.24,1);
}
.gallery-viewer[hidden]{ display:none !important; }
.gallery-viewer.swiping{ transition:none !important; }
.gallery-viewer-top{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid rgba(20,28,40,.06);
  background:rgba(255,255,255,.92);
}
.gallery-viewer-top .gallery-iconbtn{
  background:rgba(255,255,255,.72); color:rgba(40,48,60,.78);
  border-color:rgba(255,255,255,.8);
}
.gallery-viewer-top #galleryViewerHead{
  font-size:15px; font-weight:600; color:#1a1f28;
  max-width:58vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gallery-viewer-scroll{
  flex:1; min-height:0; overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 0 calc(24px + env(safe-area-inset-bottom));
  background:#fff;
}
.gallery-viewer-scroll img{
  width:100%; max-height:58vh; object-fit:contain; display:block;
  background:#f4f5f7;
}
.gallery-viewer-body{
  padding:16px 18px 8px;
  color:#1a1f28;
}
.gallery-viewer-body h2{
  margin:0 0 12px; font-size:17px; font-weight:650; color:#12161d;
}
.gallery-block{ margin-bottom:14px; }
.gallery-block label{
  display:block; font-size:11px; letter-spacing:.08em;
  color:rgba(40,48,60,.45); margin-bottom:4px;
}
.gallery-block p{
  margin:0; font-size:13.5px; line-height:1.55; color:#2a3140;
  white-space:pre-wrap; word-break:break-word;
}
.gallery-viewer-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.gallery-viewer-actions button{
  border:1px solid rgba(20,28,40,.12); border-radius:999px;
  padding:8px 14px; background:#f3f4f6; color:#1a1f28;
  font:inherit; font-size:12px; cursor:pointer;
}
.gallery-viewer-actions button.danger{
  background:rgba(220,70,80,.1); border-color:rgba(220,70,80,.28); color:#c43b45;
}