/**
 * 角色手机 · 相册 App 新样式（2026-09-12）
 * 按 _wg_album_v1.html 定稿落地
 *
 * 语言：中性灰底 + 照片当主角 + 大图卡片 + 玻璃信息片
 * 作用域：.pc-photo-album（角色手机里的相册容器）
 * 加载顺序：在 phone.css 之后 → 同优先级下覆盖旧样式
 */

.pc-photo-album {
  --pa-ink:   #17171A;
  --pa-ink2:  #6E6E76;
  --pa-ink3:  #A6A6AE;
  --pa-soft:  rgba(0,0,0,.05);
  --pa-line:  rgba(0,0,0,.08);
  --pa-serif: 'Songti SC','STSong','Noto Serif SC','Source Han Serif SC',Georgia,serif;
  --pa-latin: 'Didot','Bodoni MT','Times New Roman',Georgia,serif;
}

html.dark-mode .pc-photo-album {
  --pa-ink:   #F2F2F4;
  --pa-ink2:  #9A9AA2;
  --pa-ink3:  #6A6A72;
  --pa-soft:  rgba(255,255,255,.07);
  --pa-line:  rgba(255,255,255,.09);
}

/* ═══════════════ 首页：大标题 ═══════════════ */

.pc-photo-album .pa-head {
  display: flex; align-items: center;
  padding: 2px 16px 6px;
  flex-shrink: 0;
}
.pc-photo-album .pa-title {
  flex: 1;
  font-size: 25px; font-weight: 700;
  color: var(--pa-ink);
  letter-spacing: .02em;
  line-height: 1.2;
}
.pc-photo-album .pa-plus {
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; padding: 0; flex-shrink: 0;
  background: var(--pa-soft);
  color: var(--pa-ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pc-photo-album .pa-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.pc-photo-album .pa-plus:active { transform: scale(.93); }
.pc-photo-album .pa-plus.is-loading { opacity: .45; }

/* 搜索框（先做成视觉占位，点击提示） */
.pc-photo-album .pa-search {
  margin: 0 16px 14px;
  height: 38px; border-radius: 10px;
  background: var(--pa-soft);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  color: var(--pa-ink3);
  font-size: 13px;
  flex-shrink: 0;
  cursor: pointer;
}
.pc-photo-album .pa-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }

/* ═══════════════ 相簿大卡 ═══════════════ */

.pc-photo-album .pa-wrap { padding: 0 16px; }

.pc-photo-album .pa-card {
  position: relative;
  display: block;
  width: 100%;
  border: 0; padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(150deg,#E6E6EB,#BCBCC5);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  text-align: left;
}
.pc-photo-album .pa-card:active { transform: scale(.985); }
.pc-photo-album .pa-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pc-photo-album .pa-card.fulls { height: 148px; margin-bottom: 12px; }
.pc-photo-album .pa-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pc-photo-album .pa-duo .pa-card { height: 166px; }

.pc-photo-album .pa-lab {
  position: absolute; left: 14px; bottom: 12px; right: 40px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  pointer-events: none;
}
.pc-photo-album .pa-lab b {
  display: block;
  font-size: 15.5px; font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-photo-album .pa-lab i {
  display: block; font-style: normal;
  font-size: 12.5px; opacity: .92;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.pc-photo-album .pa-duo .pa-lab b { font-size: 14px; }
.pc-photo-album .pa-duo .pa-lab i { font-size: 11.5px; }

/* 卡片右下角小图标（收藏锁等） */
.pc-photo-album .pa-card .pa-ind {
  position: absolute; right: 10px; bottom: 12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
}
.pc-photo-album .pa-card .pa-ind svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════ 相簿内：头部 + 网格 ═══════════════ */

.pc-photo-album .pc-album-folder-head {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 12px 10px;
  background: transparent !important;
  border-bottom: 0 !important;
}
.pc-photo-album .pc-album-head-title,
.pc-photo-album .pc-album-folder-head > span:not(.pc-album-folder-tools) {
  font-size: 19px; font-weight: 700;
  color: var(--pa-ink);
  letter-spacing: .02em;
}
.pc-photo-album .pc-album-back {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: transparent;
  color: var(--pa-ink2);
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.pc-photo-album .pc-album-back svg { stroke: currentColor; }
.pc-photo-album .pc-album-folder-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pc-photo-album .pc-album-folder-total {
  font-size: 12px; color: var(--pa-ink3);
  font-variant-numeric: tabular-nums;
}
.pc-photo-album .pc-album-folder-action {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--pa-soft);
  color: var(--pa-ink2);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.pc-photo-album .pc-album-folder-action svg { stroke: currentColor; fill: none; }

/* 网格：紧凑 3 列 */
.pc-photo-album .pc-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 3px 24px;
  background: transparent !important;
}
.pc-photo-album .pc-album-item {
  position: relative;
  display: block;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pc-photo-album .pc-album-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 0; padding: 0;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(150deg,#EDEDF0,#C6C6CE);
  cursor: pointer;
}
.pc-photo-album .pc-album-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-photo-album .pc-album-thumb:active { opacity: .85; }
.pc-photo-album .pc-album-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px; color: var(--pa-ink3);
  text-align: center; padding: 8px;
  line-height: 1.4;
}
.pc-photo-album .pc-album-meta { display: none; }

/* 收藏星标 */
.pc-photo-album .pc-album-star {
  position: absolute; right: 5px; top: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; padding: 0;
  background: rgba(0,0,0,.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .18s;
}
.pc-photo-album .pc-album-star svg { stroke: #fff; fill: none; stroke-width: 1.8; width: 13px; height: 13px; }
.pc-photo-album .pc-album-star.active { opacity: 1; background: rgba(0,0,0,.42); }
.pc-photo-album .pc-album-star.active svg { fill: #fff; }
@media (hover: none) {
  .pc-photo-album .pc-album-star { opacity: .85; }
}

/* ═══════════════ 照片查看器：玻璃信息片 ═══════════════ */

.pc-photo-album .pc-viewer-overlay {
  background: #17171A !important;
}
.pc-photo-album .pc-viewer-topbar {
  background: transparent !important;
  border: 0 !important;
}
.pc-photo-album .pc-viewer-icon-btn {
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff !important;
  border: 0 !important;
}
.pc-photo-album .pc-viewer-icon-btn svg { stroke: #fff !important; }
.pc-photo-album .pc-viewer-nav {
  background: rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff !important;
  border: 0 !important;
}
.pc-photo-album .pc-viewer-nav svg { stroke: #fff !important; }

/* 底部信息片（原来是一行 caption） */
.pc-photo-album .pc-viewer-caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  border-radius: 20px;
  padding: 16px 18px 14px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  color: #fff;
  text-align: left;
  max-width: none !important;
  margin: 0 !important;
}
.pc-photo-album .pc-viewer-cap-date {
  font-family: var(--pa-latin);
  font-size: 9px; letter-spacing: .24em;
  color: rgba(255,255,255,.66);
}
.pc-photo-album .pc-viewer-cap-title {
  font-family: var(--pa-serif);
  font-size: 23px; letter-spacing: .04em;
  margin-top: 6px; line-height: 1.25;
}
.pc-photo-album .pc-viewer-cap-desc {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-top: 5px; line-height: 1.5;
}
.pc-photo-album .pc-viewer-cap-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.pc-photo-album .pc-viewer-cap-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 11.5px; letter-spacing: .02em;
  cursor: pointer;
}
.pc-photo-album .pc-viewer-cap-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-photo-album .pc-viewer-cap-btn.solid {
  background: rgba(255,255,255,.92);
  color: #17171A;
  border-color: transparent;
}
.pc-photo-album .pc-viewer-cap-btn.solid svg { stroke: #17171A; }
.pc-photo-album .pc-viewer-cap-idx {
  margin-left: auto;
  font-family: var(--pa-latin);
  font-size: 11px; letter-spacing: .16em;
  color: rgba(255,255,255,.6);
}