/* 查手机·相册（仿 iOS 照片「图库」）。页面由 ta-phone-album.js 挂载，全部限定在 .alb-app 下。
   顶部大标题浮在照片上（渐隐白底），底部胶囊 tab「图库 / 精选集」+ 单独的圆形搜索键。 */

.alb-app { background: #fff; color: #000; }
.alb-app svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:where(.alb-app) button { cursor: pointer; border: 0; background: none; padding: 0; }

.alb-scroll { padding-top: calc(var(--safe-top) + 92px); padding-bottom: calc(96px + var(--safe-bottom)); }
.alb-scroll.alb-cols { padding-top: 0; }

/* 浮在照片上的大标题 */
.alb-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; background: linear-gradient(#fff 0%, rgb(255 255 255 / 92%) 55%, rgb(255 255 255 / 0%) 100%); padding-bottom: 18px; }
.alb-head-row { display: flex; align-items: flex-start; gap: 4px; padding: 2px 16px 0 6px; pointer-events: auto; }
.alb-home { width: 30px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; color: #000; }
.alb-home svg { width: 22px; height: 22px; stroke-width: 2.4; }
.alb-title { flex: 1; min-width: 0; }
.alb-title h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: .3px; line-height: 1.15; }
.alb-title p { margin: 1px 0 0; font-size: 15px; font-weight: 500; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb-back { display: block; margin: 0 0 2px; font-size: 15px; color: #007aff; }
.alb-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.alb-round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #000; background: rgb(255 255 255 / 78%); box-shadow: 0 1px 6px rgb(0 0 0 / 12%), inset 0 0 0 .5px rgb(0 0 0 / 6%); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.alb-pill { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 16px; font-weight: 600; color: #000; background: rgb(255 255 255 / 78%); box-shadow: 0 1px 6px rgb(0 0 0 / 12%), inset 0 0 0 .5px rgb(0 0 0 / 6%); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }

/* 3 列密排 */
.alb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.alb-cell { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #e5e5ea; }
.alb-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-cell.on img { opacity: .72; }
.alb-badge { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; background: rgb(0 0 0 / 45%); }
.alb-check { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; background: rgb(0 0 0 / 15%); box-shadow: 0 0 2px rgb(0 0 0 / 30%); }
.alb-cell.on .alb-check { background: #007aff; }
.alb-cell.on .alb-check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.alb-pending { background: linear-gradient(110deg, #e5e5ea 30%, #f2f2f7 50%, #e5e5ea 70%) 0 0 / 300% 100%; animation: alb-shimmer 1.4s linear infinite; }
@keyframes alb-shimmer { to { background-position: -300% 0; } }

.alb-empty { padding: 40px 24px 0; text-align: center; color: #8e8e93; }
.alb-empty .alb-grid { margin: -40px -24px 32px; }
.alb-empty p { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: #000; }
.alb-empty small { font-size: 14px; line-height: 1.5; }

/* 底部：胶囊 tab + 圆形搜索 */
.alb-tabbar { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 12px); z-index: 3; display: flex; align-items: center; gap: 10px; }
.alb-tabs { flex: 0 1 auto; display: flex; padding: 4px; border-radius: 32px; background: rgb(255 255 255 / 80%); box-shadow: 0 2px 14px rgb(0 0 0 / 14%), inset 0 0 0 .5px rgb(0 0 0 / 6%); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.alb-tabs button { min-width: 84px; height: 54px; padding: 0 14px; border-radius: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #000; font-size: 10px; font-weight: 600; }
.alb-tabs button svg { width: 24px; height: 24px; stroke-width: 1.8; }
.alb-tabs button.on { color: #007aff; background: rgb(0 0 0 / 6%); }
.alb-search { width: 62px; height: 62px; margin-left: auto; }
.alb-search svg { width: 24px; height: 24px; }

.alb-selbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px calc(var(--safe-bottom) + 12px); background: rgb(249 249 249 / 92%); border-top: .5px solid rgb(0 0 0 / 15%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 16px; font-weight: 600; }
.alb-selbar button { font-size: 17px; color: #ff3b30; }
.alb-selbar button:disabled { color: #c7c7cc; }

/* 精选集 */
.alb-head-static { display: flex; flex-wrap: wrap; align-items: center; padding: 2px 16px 12px 6px; }
.alb-head-static h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: .3px; }
.alb-head-static p { flex-basis: 100%; margin: 0 0 0 34px; font-size: 15px; color: #8e8e93; }
.alb-col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; padding: 0 16px; }
.alb-col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: #000; }
.alb-col-cover { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e5e5ea; }
.alb-col-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-col b { margin-top: 6px; font-size: 15px; font-weight: 600; }
.alb-col small { font-size: 14px; color: #8e8e93; }

/* 大图 */
.alb-viewer { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #000; color: #fff; }
.alb-viewer header { display: flex; align-items: center; padding: 4px 12px; }
.alb-viewer header button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgb(255 255 255 / 14%); }
.alb-viewer header span { flex: 1; display: flex; flex-direction: column; align-items: center; }
.alb-viewer header b { font-size: 16px; font-weight: 600; }
.alb-viewer header small { font-size: 12px; color: rgb(255 255 255 / 60%); }
.alb-viewer header i { width: 40px; }
.alb-viewer-img { flex: 1; min-height: 0; display: grid; place-items: center; }
.alb-viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.alb-viewer > p { margin: 0; padding: 12px 20px calc(var(--safe-bottom) + 20px); font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / 80%); }