/* ==========================================================================
   相册页 v2（按 design/20261023_相册页_皮肤对照_v3 落地）
   --------------------------------------------------------------------------
   尺寸全部来自骨架 v6，皮肤层不得改尺寸：
     G1 20 · M1 筛选 362×50 · G2 8 · M2 计数 362×20 · G3 8 · M3 排序 362×36
     G4 8 · M4 日期头 362×28 · M5 聚会块 390×196（信息行 36 + 封面条 148，通栏）
     M6 懒加载提示 390×44 · M7 底栏 390×60（底栏样式见唯一真源 ds-nav-v3.css）

   复用：点阵图形/数字走 pixel-art.js（app.js 的 pixelArt/pixelNum 包装），
        不再为相册单独实现一套像素渲染。
   ========================================================================== */

.al-top {
  flex: 0 0 auto;
  padding: 20px 14px 0;
  background: #000;
}

/* M1 筛选行 50：chip 32 高，横滑，选中＝橙描边 + 橙字 + 10% 橙底（三通道） */
.al-filters {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.al-filters::-webkit-scrollbar { display: none; }
.al-chip {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 2px;
  background: rgba(255, 255, 255, .04);
  color: #ccc;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}
.al-chip.on {
  border-color: #FF4D00;
  color: #FF4D00;
  background: rgba(255, 77, 0, .10);
  font-weight: 700;
}

/* M2 计数行 20：数字点阵，单位与文字不点阵化 */
.al-count {
  height: 20px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #8A8A8A;
  letter-spacing: .04em;
}
.al-count .unit { color: #8A8A8A; }
.al-count .al-sep { opacity: .45; }

/* M3 排序行 36：选中下划线＝4px 方块串（与圈子页 Tabs 同一语言） */
.al-sortrow {
  height: 36px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.al-sorttab {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: #8A8A8A;
}
.al-sorttab.on { color: #fff; font-weight: 650; }
.al-sorttab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #FF4D00 0 4px, transparent 4px 8px);
}
.al-sorttab i { font-style: normal; font-size: 9px; margin-left: 3px; color: #FF4D00; }

.al-feed { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 0; }

/* M4 日期头 28（顶部区 ↔ 内容 = 8） */
.al-date {
  height: 28px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 14px;
  font-size: 11.5px;
  color: #ccc;
  letter-spacing: .06em;
}

/* M5 聚会块 196：通栏（左右各出血 14），信息行 36 + 封面条 148 */
.al-gblock {
  height: 196px;
  margin: 8px -14px 0;
  position: relative;
  background: #000;
  overflow: hidden;
}
.al-ghead {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
}
.al-ghead h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-meta { display: flex; align-items: baseline; gap: 4px; font-size: 10.5px; color: #8A8A8A; }
.al-meta .unit { font-size: 9px; letter-spacing: .14em; }

/* 封面条 148 */
.al-strip { height: 148px; position: relative; overflow: hidden; }
.al-strip.stack {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}
.al-strip.stack::-webkit-scrollbar { display: none; }
.al-track { height: 1px; }

.al-tile {
  position: absolute;
  bottom: 15px;
  border-radius: 12px;
  overflow: hidden;
  background: #080808;
  border: 1px solid rgba(255, 255, 255, .09);
  cursor: pointer;
}
.al-tile.gone { opacity: .62; }

/* 封面两态：未加载＝点阵占位铺满；加载完成＝真实图两段式入场（180ms + 180ms） */
.al-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.al-ph svg { transition: opacity .18s linear; }
.al-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(6px) saturate(.9);
  transform: scale(1.04);
  transition: opacity .18s linear, filter .18s ease-out .18s, transform .18s ease-out .18s;
}
.al-real.on { opacity: 1; filter: none; transform: none; }
.al-tile.loaded .al-ph svg { opacity: 0; }

.al-veil { position: absolute; inset: 0; background: #000; pointer-events: none; }
.al-play {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .62);
  border-radius: 4px;
}
.al-gone {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 8px;
  letter-spacing: .14em;
  color: #8A8A8A;
}

/* M6 懒加载提示 44 */
.al-more {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: #8A8A8A;
  letter-spacing: .06em;
}
.al-more.is-clickable { cursor: pointer; color: #ccc; }
.al-more.is-loading::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #FF4D00;
  animation: al-blink 1.2s linear infinite;
}
@keyframes al-blink { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .al-real { transition: opacity .18s linear; }
  .al-real.on { filter: none; transform: none; }
  .al-more.is-loading::before { animation: none; opacity: .62; }
}