/* peers.css */
/* Page Builder kit 共享 peer 样式 — 仅依赖主题 tokens（--c-* / --radius / --ease / --dur） */

/* ── 无主题 base 时：去掉浏览器对 <a> 的默认下划线 ── */
.pb-block-host a,
.pb-site-nav a,
.pb-site-footer a,
.bili-channel a,
.bili-feed a,
.bili-sec a,
.pb-cf a,
.c-rankcard a,
.rank-list a,
.pb-vod-card a,
.pb-manga-card a,
.pb-topic-card a,
.pb-actor-card a,
.pb-live-card a,
.pb-art-book a,
.pb-site-row a,
.pb-gbook-wall a,
.pb-sec-head a,
.pb-carousel-fullbleed a {
  text-decoration: none;
}

/* ── 封面 trait（横向默认 69:40） ── */
.pb-cover--poster-h .pb-vod-card__pic,
.pb-cover--poster-h .pb-manga-card__pic,
.pb-cover--poster-h .pb-topic-card__pic,
.pb-cover--poster-h .pb-live-card__pic {
  aspect-ratio: var(--pb-cover-ratio, 69 / 40);
}
.pb-cover--poster-v .pb-vod-card__pic,
.pb-cover--poster-v .pb-manga-card__pic,
.pb-cover--poster-v .pb-topic-card__pic,
.pb-cover--poster-v .pb-live-card__pic {
  aspect-ratio: var(--pb-cover-ratio, 3 / 4);
}
.pb-cover--poster-h .pb-art-book__cover { aspect-ratio: var(--pb-cover-ratio, 69 / 40); }
.pb-cover--poster-v .pb-art-book__cover { aspect-ratio: var(--pb-cover-ratio, 3 / 4); }
.pb-cover--poster-h .pb-site-row__fig a {
  display: block;
  width: 72px;
  aspect-ratio: var(--pb-cover-ratio, 69 / 40);
}
.pb-cover--poster-v .pb-site-row__fig a {
  display: block;
  width: 56px;
  aspect-ratio: var(--pb-cover-ratio, 3 / 4);
}
.pb-cover--poster-h .pb-site-row__fig,
.pb-cover--poster-v .pb-site-row__fig { flex: 0 0 auto !important; }
.pb-cover--poster-h .pb-site-row__fig img,
.pb-cover--poster-v .pb-site-row__fig img,
.pb-cover .pb-site-row__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pb-cover--ratio-16-9 { --pb-cover-ratio: 16 / 9; }
.pb-cover--ratio-4-3 { --pb-cover-ratio: 4 / 3; }
.pb-cover--ratio-3-4 { --pb-cover-ratio: 3 / 4; }
.pb-cover--ratio-2-3 { --pb-cover-ratio: 2 / 3; }
.pb-cover--ratio-9-16 { --pb-cover-ratio: 9 / 16; }
.pb-cover--ratio-69-40 { --pb-cover-ratio: 69 / 40; }
.pb-cover--ratio-20-29 { --pb-cover-ratio: 20 / 29; }
.pb-cover--ratio-1-1 { --pb-cover-ratio: 1 / 1; }
.pb-cf .pb-cover { display: contents; }

/* ── 视频卡 ── */
.pb-vod-card { background: transparent; padding: 0; }
.pb-vod-card__pic {
  position: relative;
  display: block;
  aspect-ratio: 69 / 40;
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--c-surface-2, #e3e5e7);
}
.pb-vod-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s var(--ease, ease);
}
.pb-vod-card:hover .pb-vod-card__pic img { transform: scale(1.04); }
/* 封面方向（竖屏短剧等）：槽位由分类 TypeCover 定（aspect-ratio / poster-h|v）；runtime 只调 fit，不改槽。
   方向与框不一致 → contain 完整显示（vod 垫模糊底）；data-cover-fit 由 runtime 写入；data-cover-orient 为首屏提示。 */
.pb-vod-card__backdrop { display: none; }
[data-cover-auto="fit"][data-cover-pending] img,
[data-cover-auto="fit"][data-cover-pending] [data-cover-backdrop] { visibility: hidden; }
.pb-vod-card[data-cover-fit="contain"] .pb-vod-card__backdrop,
.pb-vod-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__backdrop,
.pb-cover:not(.pb-cover--landscape) .pb-vod-card[data-cover-orient="h"]:not([data-cover-fit]) .pb-vod-card__backdrop {
  display: block;
  position: absolute;
  inset: -12px;
  background-position: center;
  background-size: cover;
  filter: blur(14px) brightness(0.75);
  pointer-events: none;
}
.pb-vod-card[data-cover-fit="contain"] .pb-vod-card__pic img,
.pb-vod-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__pic img,
.pb-cover:not(.pb-cover--landscape) .pb-vod-card[data-cover-orient="h"]:not([data-cover-fit]) .pb-vod-card__pic img {
  position: relative;
  object-fit: contain;
}
.pb-cover:not(.pb-cover--landscape) .pb-vod-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__backdrop { display: none; }
.pb-cover:not(.pb-cover--landscape) .pb-vod-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__pic img {
  position: static;
  object-fit: cover;
}

/* 横版定槽（uniform / 16:9 / 排行地图等）：竖图 contain + 同图虚化底（#1588） */
[data-cover-auto="fit"][data-cover-fit="contain"] [data-cover-backdrop] {
  display: block;
  position: absolute;
  inset: -12px;
  background-position: center;
  background-size: cover;
  filter: blur(14px) brightness(0.75);
  pointer-events: none;
}
[data-cover-auto="fit"][data-cover-fit="contain"] img[data-cover],
[data-cover-auto="fit"][data-cover-fit="contain"] img[data-original]:not(.mac-cover-fallback) {
  position: relative;
  object-fit: contain;
}
.pb-cover--landscape .pb-vod-card[data-cover-auto="fit"]:not([data-cover-fit="cover"]) .pb-vod-card__pic img {
  position: relative;
}

/* 卡片 pic 已有 TypeCover inline aspect-ratio：槽已跟分类，勿再把 orient=v 当成「横槽塞竖图」强制 blur。
   runtime 显式 data-cover-fit=contain（真冲突图）仍走上面通用 contain/blur 规则。 */
.pb-vod-card:has(> .pb-vod-card__pic[style*="aspect-ratio"])[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__backdrop {
  display: none;
}
.pb-vod-card:has(> .pb-vod-card__pic[style*="aspect-ratio"])[data-cover-orient="v"]:not([data-cover-fit]) .pb-vod-card__pic img {
  position: static;
  object-fit: cover;
}
/* manga：无 backdrop，冲突方向仅 contain（完整显示优先） */
.pb-manga-card[data-cover-fit="contain"] .pb-manga-card__pic img,
.pb-manga-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-manga-card__pic img,
.pb-cover:not(.pb-cover--landscape) .pb-manga-card[data-cover-orient="h"]:not([data-cover-fit]) .pb-manga-card__pic img {
  object-fit: contain;
}
.pb-cover:not(.pb-cover--landscape) .pb-manga-card[data-cover-orient="v"]:not([data-cover-fit]) .pb-manga-card__pic img {
  object-fit: cover;
}
.pb-vod-card__mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 40px;
  height: auto;
  padding: 18px 8px 6px;
  box-sizing: border-box;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  pointer-events: none;
  z-index: 1;
}
/* 左下：播放量；右上备注；右下时长 */
.pb-vod-card__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pb-vod-card__stats {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.pb-vod-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pb-vod-card__stat--score {
  opacity: 0.95;
}
.pb-vod-card__ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: 0.95;
}
.pb-vod-card__ico--play {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pb-vod-card__ico--score {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pb-vod-card__rm,
.pb-manga-card__rm {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* 付费角标（金币 / VIP）：绝对定位到最近的自适应封面容器右上角。
   用「封面容器 + 角标」的兜底组合选择器，而不是逐个列举卡片类名——新增卡片形态
   （novel/manga/np2 各种 grid）时不必再回来补 selector（issue #1609 曾因漏列导致
   小说/漫画角标被拉成整行宽）。 */
.pb-vod-card__pic .np2-paytag,
.pb-site-map__media-pic .np2-paytag,
.pb-art-book__cover .np2-paytag,
.pb-manga-card__pic .np2-paytag,
.pb-novel-card__pic .np2-paytag,
.np2-card__pic .np2-paytag,
.np2-v3__pic .np2-paytag,
.np2-hs__pic .np2-paytag,
.pb-vod-card .pb-vod-card__pic > .np2-paytag {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}
/* 兜底：封面容器内的角标一律 absolute（不依赖上面逐个列举的类名） */
[data-cover-auto] .pb-vod-card__pic > .np2-paytag,
.pb-cover > .np2-paytag {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}
/* 有付费角标时让出右上角，避免与「HD/更新至 N 话」备注角标叠字 */
.pb-manga-card__pic:has(.np2-paytag) .pb-manga-card__rm {
  top: 22px;
}
.pb-vod-card__pic:has(.np2-paytag) .pb-vod-card__rm {
  display: none;
}
.np2-paytag__vip {
  display: flex;
  height: 14px;
  min-width: 30px;
  padding: 0.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff7ec 0%, #ffb78e 100%);
  box-sizing: border-box;
}
.np2-paytag__vip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 30px;
  padding: 0 3px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  height: 13px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
  background-image: linear-gradient(to right, #fee2ba 13%, #e69167 100%);
  box-sizing: border-box;
}
.np2-paytag__coin {
  display: flex;
  height: 14px;
  min-width: 28px;
  padding: 0.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fb8749 0%, #ed4e2e 100%);
  box-sizing: border-box;
}
.np2-paytag__coin-inner {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 100%;
  flex: 1;
  padding: 0 3px 0 2px;
  border-radius: 999px;
  background-image: linear-gradient(105deg, #ff5e00 11%, #e12810 100%);
  box-sizing: border-box;
}
.np2-paytag__coin-ico {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  display: block;
}
.np2-paytag__amt {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
}

.pb-vod-card__title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pb-vod-card__title a { color: var(--c-text); }
.pb-vod-card__title a:hover { color: var(--c-accent); }
.pb-vod-card__meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.4;
  max-height: calc(1.4em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* ── 漫画 / 专题 / 直播卡（结构同视频卡） ── */
.pb-manga-card,
.pb-topic-card,
.pb-live-card { background: transparent; padding: 0; }
.pb-manga-card__pic,
.pb-topic-card__pic,
.pb-live-card__pic {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--c-surface-2, #e3e5e7);
}
.pb-manga-card__pic img,
.pb-topic-card__pic img,
.pb-live-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pb-manga-card__title,
.pb-topic-card__title,
.pb-live-card__title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pb-manga-card__title a,
.pb-topic-card__title a,
.pb-live-card__title a { color: var(--c-text); }
.pb-manga-card__meta,
.pb-topic-card__meta,
.pb-live-card__meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.4;
  max-height: calc(1.4em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* ── 演员卡（圆形头像） ── */
.pb-actor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.pb-actor-card__pic {
  display: block;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-surface-2, #e3e5e7);
  border: 2px solid var(--c-border);
  transition: border-color var(--dur, 0.2s) var(--ease, ease);
}
.pb-actor-card__pic:hover,
.pb-actor-card__pic:focus-visible {
  border-color: var(--c-accent);
  outline: none;
}
.pb-actor-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pb-actor-card__title {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.pb-actor-card__title a {
  color: var(--c-text);
}
.pb-actor-card__title a:hover,
.pb-actor-card__title a:focus-visible {
  color: var(--c-accent);
}
.pb-actor-card__meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text-muted);
  max-height: calc(1.4em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* ── 资讯书封 ── */
.pb-art-book {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.pb-art-book__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface-2, #eceff1);
}
.pb-art-book__cover img,
.pb-art-book__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 书形占位：封面为空或加载失败（.is-empty）时显示 */
.pb-art-book__ph {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--c-accent, #6366f1);
}
.pb-art-book__ph .nv-book__ph {
  display: block;
  width: 42%;
  height: auto;
}
.pb-art-book__cover.is-empty .pb-art-book__ph {
  display: flex;
}
.pb-art-book__cover.is-empty img {
  display: none;
}
/* 备注角标（如「共185章」）：底部渐变条 */
.pb-art-book__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-art-book__cover.is-empty .pb-art-book__badge {
  background: none;
  color: var(--c-text-muted);
}
.pb-art-book__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pb-art-book__meta {
  font-size: 12px;
  color: var(--c-text-muted);
  font-style: normal;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* ── 横滑行：track 宽于视口时须 clip 在组件内，禁止撑破整页横向滚动 ── */
.pb-scroll-row {
  position: relative;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
.pb-scroll-row--no-arrows .pb-scroll-row__btn {
  display: none;
}
.pb-scroll-row__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 8px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.pb-scroll-row__viewport::-webkit-scrollbar { display: none; }
.pb-scroll-row__track {
  display: flex;
  gap: 16px;
  width: max-content;
}

/* 双行横滑：两行 + 按列填充，viewport 横向滚动（热门推荐 type=0 混排） */
.pb-scroll-row__track--rows-2 {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100cqw - (var(--pb-row-n) - 1) * var(--pb-row-gap)) / var(--pb-row-n));
  align-items: start;
  gap: var(--pb-row-gap, 16px);
  width: max-content;
}
.pb-scroll-row__track--rows-2 > .pb-vod-card,
.pb-scroll-row__track--rows-2 > .pb-manga-card {
  flex: unset;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.pb-scroll-row__track > .pb-vod-card,
.pb-scroll-row__track > .pb-manga-card {
  flex: 0 0 auto;
  width: 168px;
  scroll-snap-align: start;
}
/* 横版封面横滑：桌面加宽，约一屏 4～5 张 */
.pb-cover--poster-h .pb-scroll-row__track > .pb-vod-card,
.pb-cover--poster-h .pb-scroll-row__track > .pb-manga-card {
  width: min(280px, 22vw);
}
.pb-cover--poster-h .pb-scroll-row__track {
  gap: 18px;
}
/* 不使用左右渐变遮罩：矩形遮罩会越过圆角封面盖到标题区，悬停/触摸时左下、右下出现黑色直角阴影 */
.pb-scroll-row__btn {
  position: absolute;
  top: 40%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(15, 15, 20, 0.52);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.pb-scroll-row__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.pb-scroll-row__btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pb-scroll-row:hover .pb-scroll-row__btn,
.pb-scroll-row:focus-within .pb-scroll-row__btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.pb-scroll-row__btn--prev {
  left: 12px;
}
.pb-scroll-row__btn--next {
  right: 12px;
}
.pb-scroll-row__btn:hover {
  background: rgba(15, 15, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pb-scroll-row__btn:active {
  transform: translateY(-50%) scale(0.94);
}

@media (min-width: 768px) {
  .pb-cover--poster-h .pb-scroll-row__btn {
    top: 36%;
  }
}

/* ── 资讯行 / 网址行 ── */
.pb-art-row,
.pb-site-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border, #e3e5e7);
}
.pb-art-row__fig,
.pb-site-row__fig { flex: 0 0 72px; }
.pb-art-row__fig img,
.pb-site-row__fig img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
}
/* 小说行：竖版书封缩略图（3:4），失效时书形占位 */
.pb-art-row__fig { flex: 0 0 60px; }
.pb-art-row__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  background: var(--c-surface-2, #eceff1);
}
.pb-art-row__fig .pb-art-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.pb-art-row__ph {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--c-accent, #6366f1);
}
.pb-art-row__ph .nv-book__ph { width: 55%; height: auto; }
.pb-art-row__cover.is-empty .pb-art-row__ph { display: flex; }
.pb-art-row__cover.is-empty img { display: none; }
.pb-art-row__body h4,
.pb-site-row__body h4 {
  margin: 0 0 4px;
  font-size: 15px;
}
.pb-art-row__meta,
.pb-site-row__meta {
  font-size: 12px;
  color: var(--c-text-muted);
}
.pb-art-row__blurb {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-2, #61666d);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 小说无封面：纯标题 + 分类 */
.pb-art-row--text-only {
  gap: 0;
  padding: 12px 0;
}
.pb-art-row--text-only .pb-art-row__body h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.pb-art-row--text-only .pb-art-row__body h4 a {
  color: var(--c-text);
  text-decoration: none;
}
.pb-art-row--text-only .pb-art-row__body h4 a:hover {
  color: var(--c-accent);
}
.pb-art-row--text-only .pb-art-row__meta {
  margin-top: 4px;
}
.rows--art-text .pb-art-row--text-only:last-child {
  border-bottom: 0;
}

/* 小说首页「最新」列表：书形占位 + 箭头 */
.rows--art-novel-home .pb-art-row--novel-home {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.06));
  text-decoration: none;
  color: inherit;
  transition: background var(--dur, 0.2s) var(--ease, ease);
}

.rows--art-novel-home .pb-art-row--novel-home:last-child {
  border-bottom: 0;
}

.rows--art-novel-home .pb-art-row--novel-home:hover {
  background: rgba(15, 23, 42, 0.02);
}

.rows--art-novel-home .pb-art-row--novel-home:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.rows--art-novel-home .pb-art-row__book {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: #f3e8ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9a3 3 0 0 1 3 3v15l-4-2-4 2-4-2-4 2V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.rows--art-novel-home .pb-art-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rows--art-novel-home .pb-art-row__title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--c-text, #18191c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rows--art-novel-home .pb-art-row__meta {
  margin: 0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
  color: var(--c-text-muted, #9499a0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rows--art-novel-home .pb-art-row__chev {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  opacity: 0.4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361666d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 侧栏 / 通用排行面板 ── */
.pb-rank-panel {
  background: var(--c-surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 14px 14px 8px;
}
.pb-rank-panel__title {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 15px;
  font-weight: 650;
  color: var(--c-text);
}
.pb-rank-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pb-rank;
}
.pb-rank-panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
}
.pb-rank-panel__item:last-child {
  border-bottom: 0;
}
.pb-rank-panel__item::before {
  counter-increment: pb-rank;
  content: counter(pb-rank);
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #c9ccd0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pb-rank-panel__item:nth-child(1)::before { background: #f85a5a; }
.pb-rank-panel__item:nth-child(2)::before { background: #ff9212; }
.pb-rank-panel__item:nth-child(3)::before { background: #ffc85c; color: #333; }
.pb-rank-panel__item a {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur, 0.2s) var(--ease, ease);
}
.pb-rank-panel__item a:hover { color: var(--c-accent); }
.pb-rank-panel__item a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.pb-rank-panel__item em {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: right;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

/* ── 留言墙 ── */
.pb-gbook-wall {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.pb-gbook-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e5e7);
  border-radius: var(--radius, 6px);
  padding: 12px;
}
.pb-gbook-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pb-gbook-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-gbook-avatar-bg, var(--c-accent));
  color: #fff;
  font-weight: 600;
}
.pb-gbook-card__avatar--img img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.pb-gbook-card__name { font-size: 14px; color: var(--c-text); }
.pb-gbook-card__time { font-size: 12px; color: var(--c-text-muted); }
.pb-gbook-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
}
.pb-gbook-card__reply {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--c-text-muted);
  background: var(--c-surface-2, #f6f7f8);
  padding: 8px;
  border-radius: var(--radius-sm, 4px);
}
.pb-gbook-card__reply-tag {
  color: var(--c-accent);
  font-weight: 600;
  margin-right: 6px;
}

@media (max-width: 767px) {
  .pb-scroll-row__btn { display: none; }
  /* 竖版横滑：保持紧凑 */
  .pb-scroll-row__track > .pb-vod-card,
  .pb-scroll-row__track > .pb-manga-card { width: 112px; }
  /* 横版封面：约一屏 2 张 + 露出下一张，标题可读 */
  .pb-cover--poster-h .pb-scroll-row__track > .pb-vod-card,
  .pb-cover--poster-h .pb-scroll-row__track > .pb-manga-card {
    width: min(72vw, 260px);
  }
  .pb-cover--poster-h .pb-scroll-row__track {
    gap: 12px;
  }
  /* 负 margin 会把横滑视口撑出页面，真机可左右晃 */
  .pb-scroll-row__viewport {
    margin: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .pb-vod-card__mask {
    padding: 16px 7px 5px;
    font-size: 11px;
    gap: 8px;
  }
  .pb-vod-card__stats { max-width: 100%; }
  .pb-vod-card__rm,
  .pb-manga-card__rm { max-width: calc(100% - 12px); }
}


/* 分区标题 SVG 图标（img 渲染，描边 SVG 在 mask 下易不可见） */
.ts-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  pointer-events: none;
}
.ts-icon--img {
  object-fit: contain;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.ts-icon--current {
  background-color: currentColor;
  -webkit-mask: var(--ts-icon) center / contain no-repeat;
  mask: var(--ts-icon) center / contain no-repeat;
}
.ts-icon--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: none;
  -webkit-mask: none;
  mask: none;
  vertical-align: -0.125em;
}
.ts-icon--inline svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bili-channel__ico-bg .ts-icon--img,
.bili-sec__ico .ts-icon--img,
.media-hero__play .ts-icon--img {
  filter: brightness(0) invert(1);
}
.bili-paging__arrow-ico.ts-icon--img,
.bili-paging__arrow-ico.ts-icon--current,
.bili-paging__arrow-ico.ts-icon--inline,
.bili-channel__tab-toggle-ico.ts-icon--img,
.bili-channel__tab-toggle-ico.ts-icon--current,
.bili-channel__tab-toggle-ico.ts-icon--inline {
  filter: none;
}

/* ── 横滑行整页显示：卡片宽度按视口宽度等分，一屏恰好 N 张，末尾不露半张 ──
   viewport 作为容器，100cqw = 可视宽度；不支持 cqw 的浏览器回落到上方固定宽度 */
.pb-scroll-row__viewport {
  container-type: inline-size;
}
.pb-scroll-row__track {
  --pb-row-n: 6;
  --pb-row-gap: 16px;
  gap: var(--pb-row-gap);
}
.pb-cover--poster-h .pb-scroll-row__track {
  --pb-row-n: 5;
  --pb-row-gap: 18px;
  /* 与宽度公式使用同一间距，覆盖上方 @media (max-width:767px) 的固定 gap */
  gap: var(--pb-row-gap);
}
.pb-scroll-row__track > .pb-vod-card,
.pb-scroll-row__track > .pb-manga-card,
.pb-cover--poster-h .pb-scroll-row__track > .pb-vod-card,
.pb-cover--poster-h .pb-scroll-row__track > .pb-manga-card {
  width: calc((100cqw - (var(--pb-row-n) - 1) * var(--pb-row-gap)) / var(--pb-row-n));
}
@container (max-width: 1099px) {
  .pb-cover--poster-h .pb-scroll-row__track { --pb-row-n: 4; }
}
@container (max-width: 899px) {
  .pb-scroll-row__track { --pb-row-n: 5; }
}
@container (max-width: 799px) {
  .pb-cover--poster-h .pb-scroll-row__track { --pb-row-n: 3; }
}
@container (max-width: 639px) {
  .pb-scroll-row__track { --pb-row-n: 4; --pb-row-gap: 12px; }
  .pb-cover--poster-h .pb-scroll-row__track { --pb-row-gap: 12px; }
}
@container (max-width: 559px) {
  .pb-cover--poster-h .pb-scroll-row__track { --pb-row-n: 2; }
}
@container (max-width: 419px) {
  .pb-scroll-row__track { --pb-row-n: 3; }
}


/* auth_form/style.css */
/* auth_form — 登录/注册一体表单（PB 预览自包含；主题页可叠 auth-page.css） */
[data-component="auth_form"].auth-page-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.auth-page-form__field {
  display: block;
  margin: 0;
}

.auth-page-form__input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border, #e3e5e7);
  border-radius: 10px;
  background: var(--c-surface, #fff);
  color: var(--c-text, #18191c);
  font-size: 15px;
  box-sizing: border-box;
}

.auth-page-form__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft, var(--c-accent-border));
}

.auth-page-form__field--pwd .auth-page-form__pwd {
  position: relative;
  display: block;
}

.auth-page-form__eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted, #9499a0);
  cursor: pointer;
}

.auth-page-form__meta {
  display: flex;
  justify-content: flex-end;
}

.auth-page-form__forgot {
  font-size: 13px;
  color: var(--c-text-muted, #9499a0);
  text-decoration: none;
}

.auth-page-form__forgot:hover {
  color: var(--c-accent);
}

.auth-page-form__error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(229, 77, 66, 0.08);
  color: #e54d42;
  font-size: 13px;
}

.auth-page-form__submit {
  min-height: 44px;
  border: 0;
  border-radius: 22px;
  background: var(--c-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.auth-page-form__submit:hover {
  background: var(--c-accent-hover, #e85d88);
}

.auth-page-form__invite {
  text-align: center;
  margin: 0;
}

.auth-page-form__invite-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted, #61666d);
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
}

.auth-page-form__invite-chev {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.auth-page-form__invite.is-open .auth-page-form__invite-chev {
  transform: rotate(180deg);
}

.auth-page-form__invite-panel {
  margin-top: 8px;
}


/* auth_page/style.css */
/* auth_page v=10 — bundled assets; fullscreen immersive login (theme-token aware) */
html:has(body.pbs-body--auth),
html:has(body.page-auth) {
  height: 100%;
}
body.pbs-body--auth,
body.page-auth {
  min-height: 100dvh;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--c-bg, #0b1220);
}
body.pbs-body--auth #main,
body.pbs-body--auth .pbs-main--auth,
.page-auth #main {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

.auth-page {
  /* 统一横向留白：顶栏、语言按钮、表单内容共用同一条对齐轴 */
  --auth-gutter: clamp(16px, 4vw, 28px);
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-bg, #f3f7fb);
}

.auth-page__mnav {
  display: none;
}

/* 整页布局无站点头尾，语言切换固定在右上角（下拉，避免九语横排拥挤） */
.auth-page__lang-dd {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0));
  right: max(12px, env(safe-area-inset-right, 0));
  z-index: 20;
}

.auth-page__lang-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(168px, 46vw);
  min-height: 36px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  /* 跟随主题 token：暗色主题下不再是一块半透明黑底压在深色卡片上 */
  background: var(--c-surface-2, rgba(0, 0, 0, 0.06));
  color: var(--c-text, #18191c);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.auth-page__lang-dd-btn:hover,
.auth-page__lang-dd-btn[aria-expanded="true"] {
  background: var(--c-surface, #fff);
  color: var(--c-text, #18191c);
}

.auth-page__lang-dd-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-accent, #0ea5e9) 70%, #fff);
  outline-offset: 2px;
}

.auth-page__lang-dd-cur {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-page__lang-dd-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  transition: transform var(--dur, 0.2s) var(--ease, ease);
}

.auth-page__lang-dd-btn[aria-expanded="true"] .auth-page__lang-dd-caret {
  transform: rotate(180deg);
}

.auth-page__lang-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  max-width: min(220px, 72vw);
  max-height: min(280px, 50dvh);
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  box-sizing: border-box;
}

.auth-page__lang-dd-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text, #18191c);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.auth-page__lang-dd-menu button:hover,
.auth-page__lang-dd-menu button:focus-visible {
  background: var(--c-surface-2, #f1f2f3);
  outline: none;
}

.auth-page__layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
  min-height: 100dvh;
}

.auth-page__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(32px, 6vw, 72px);
  min-height: 100dvh;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--c-accent, #0ea5e9) 28%, transparent) 0%,
      color-mix(in srgb, var(--c-accent, #0ea5e9) 12%, transparent) 42%,
      rgba(8, 12, 24, 0.38) 100%
    ),
    var(--auth-hero-img, url('../../page-builder-components/auth_page/assets/img/auth-login-hero.png')) center/cover no-repeat,
    radial-gradient(120% 80% at 15% 10%, color-mix(in srgb, var(--c-accent, #0ea5e9) 28%, #102a43), #0b1220 72%);
  overflow: hidden;
}

.auth-page__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.04) 0%, rgba(8, 10, 14, 0.28) 100%);
  pointer-events: none;
}

.auth-page__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 460px;
  color: #fff;
  text-align: left;
}

.auth-page__hero-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.auth-page__hero-desc {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.auth-page__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px);
  /* 平板/横屏也会弹软键盘：留出 --auth-kb-h 滚动空间 */
  padding-bottom: calc(clamp(28px, 4vw, 56px) + var(--auth-kb-h, 0px));
  min-height: 100dvh;
  box-sizing: border-box;
  background: var(--c-surface, #fff);
}

.auth-page__mbanner {
  display: none;
}

.auth-page__form-wrap {
  width: 100%;
  max-width: 400px;
}

.auth-page__sheet-head {
  display: none;
}

.auth-page__sheet-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-text);
}

.auth-page__sheet-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.auth-page__head {
  margin-bottom: 24px;
}

.auth-page__head--inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.auth-page__inline-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border: 0;
  border-radius: 10px;
  background: #f6f7f8;
  color: var(--c-text);
  cursor: pointer;
}

.auth-page__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-text);
}

.auth-page__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.auth-page-form__field {
  display: block;
  /* 间距统一交给 .auth-page-form 的 flex gap，避免 gap + margin 叠加成双倍留白 */
  margin: 0;
}

.auth-page-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
}

.auth-page-form__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f6f7f8;
  color: var(--c-text);
  font-size: 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.auth-page-form__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-accent, #0ea5e9) 55%, transparent);
  background: var(--c-surface, #fff);
  box-shadow: 0 0 0 3px var(--c-accent-soft, rgba(14,165,233,.12));
}

.auth-page-form__pwd {
  position: relative;
  display: block;
}

.auth-page-form__pwd .auth-page-form__input {
  padding-right: 48px;
}

.auth-page-form__eye {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-muted);
  transform: translateY(-50%);
  cursor: pointer;
}

.auth-page-form__eye:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text);
}

.auth-page-form__invite {
  margin: 0;
  text-align: center;
}

.auth-page-form__invite-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.auth-page-form__invite-toggle:hover {
  color: var(--c-text-muted);
}

.auth-page-form__invite-toggle:active {
  color: var(--c-accent);
}

.auth-page-form__invite-label {
  font-weight: 500;
}

.auth-page-form__invite.is-open .auth-page-form__invite-toggle {
  color: var(--c-accent);
}

.auth-page-form__invite-chev {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.auth-page-form__invite.is-open .auth-page-form__invite-chev {
  transform: rotate(180deg);
}

.auth-page-form__invite-panel {
  margin-top: 10px;
}

.auth-page-form__field--invite {
  margin-bottom: 0;
}

.auth-page-form__meta {
  display: flex;
  justify-content: flex-end;
  /* 与 field/提交按钮同用父级 gap，避免再叠加 margin 造成忽大忽小的缝 */
  margin: -4px 0 0;
}

.auth-page-form__forgot {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-accent);
}

.auth-page-form__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff1f0;
  color: #e44;
  font-size: 13px;
  line-height: 1.45;
}

.auth-page-form__submit,
.auth-page [data-mac-findpass-form] .auth-form__submit,
.auth-page [data-mac-findpass-send-form] .auth-form__submit,
.auth-page [data-mac-findpass-reset-form] .auth-form__submit,
.auth-page .auth-findpass-msg .auth-form__submit {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-brand, linear-gradient(135deg, var(--c-accent, #0ea5e9), var(--c-accent-hover, #2bb0ec)));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--c-accent-glow, rgba(14,165,233,.28));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.auth-page-form__submit:hover,
.auth-page [data-mac-findpass-form] .auth-form__submit:hover,
.auth-page [data-mac-findpass-send-form] .auth-form__submit:hover,
.auth-page [data-mac-findpass-reset-form] .auth-form__submit:hover,
.auth-page .auth-findpass-msg .auth-form__submit:hover {
  opacity: 0.96;
  box-shadow: 0 10px 28px var(--c-accent-glow, rgba(14,165,233,.34));
}

.auth-page-form__submit:active {
  transform: scale(0.99);
}

.auth-page-form__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-page-form__hint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-muted);
  text-align: center;
}

.auth-page__alt {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: center;
}

.auth-page__alt a {
  color: var(--c-accent);
  font-weight: 500;
}

.auth-page__alt span {
  margin: 0 8px;
  opacity: 0.5;
}

/* SVG path 已是左向 chevron，勿再旋转 */

.auth-modal .auth-page-form__field {
  margin-bottom: 10px;
}

.auth-modal .auth-page-form__input {
  min-height: 44px;
  font-size: 16px;
}

.auth-modal .auth-page-form__submit {
  min-height: 44px;
  font-size: 15px;
}

.auth-modal .auth-page-form__hint {
  display: none;
}

@media (max-width: 900px), (orientation: portrait) {
  .auth-page {
    position: relative;
    background: var(--c-bg, #f3f7fb);
    overscroll-behavior-y: contain;
  }

  .auth-page__layout {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }

  .auth-page[data-auth-panel="login"] .auth-page__hero {
    display: none;
  }

  .auth-page__hero {
    min-height: 220px;
    padding: 28px 20px;
    align-items: center;
    justify-content: center;
  }

  .auth-page__hero-title {
    font-size: 24px;
  }

  .auth-page__hero-desc {
    font-size: 13px;
  }

  .auth-page__main {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border-radius: 0;
    margin-top: 0;
    /* 占满顶栏以下的剩余高度，软键盘弹出时按 --auth-kb-h 收窄 */
    min-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - var(--auth-kb-h, 0px));
    position: relative;
    z-index: 1;
    background: transparent;
  }

  /* 语言切换并入顶栏行：随内容滚动，不再固定悬浮压住输入框；
     右侧对齐与表单同一 --auth-gutter 轴。 */
  .auth-page__lang-dd {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    right: var(--auth-gutter);
    z-index: 12;
  }

  .auth-page[data-auth-panel="login"] .auth-page__sheet-head {
    display: block;
    margin-bottom: 20px;
  }

  /* 移动端/平板不展示 hero 配图的替代 banner ——之前在窄而高的设备上会被压得
     变形/裁切成看似"图片损坏"的窄条，直接去掉，仅保留纯表单卡片。 */
  .auth-page__mbanner {
    display: none;
  }

  .auth-page__form-wrap {
    width: 100%;
    max-width: none;
    /* 移动端整页贴边：与顶栏同底色，不留悬空 16px 缝隙 */
    margin-top: 0;
    /* 撑满顶栏以下区域，让卡片底色铺满，不在底部漏出页面底色 */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* --auth-kb-h：auth_page/script.js 写入的软键盘高度，键盘弹出时留出滚动空间，邀请码框不被遮挡 */
    padding: 24px var(--auth-gutter) calc(max(32px, env(safe-area-inset-bottom)) + var(--auth-kb-h, 0px));
    border-radius: 0;
    box-shadow: none;
    background: var(--c-surface, #fff);
    position: relative;
    z-index: 1;
  }

  .auth-page__panel {
    width: 100%;
  }

  .auth-page__mnav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    /* 右侧给语言下拉留位，标题不再被悬浮按钮压住 */
    padding: 0 calc(var(--auth-gutter) + 92px) 0 max(4px, calc(var(--auth-gutter) - 12px));
    padding-top: env(safe-area-inset-top, 0);
    position: sticky;
    top: 0;
    background: var(--c-surface, #fff);
    border-bottom: 0;
    z-index: 10;
  }

  .auth-page__back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .auth-page__mnav-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text);
  }

  .auth-page[data-auth-panel="login"] .auth-page__mnav-title {
    visibility: hidden;
  }

  .auth-page[data-auth-panel="login"] .auth-page-form__field {
    margin-bottom: 0;
  }

  /* 输入框底色跟随主题：原先硬编码 #f8f9fa / rgba(0,0,0,.06) 会在暗色主题下
     变成刺眼的白色块，与卡片背景脱节。 */
  .auth-page[data-auth-panel="login"] .auth-page-form__input {
    min-height: 50px;
    border-color: var(--c-border, rgba(0, 0, 0, 0.08));
    background: var(--c-surface-2, #f8f9fa);
  }

  .auth-page[data-auth-panel="login"] .auth-page-form__meta {
    margin: -6px 0 2px;
  }

  .auth-page__head .auth-page__title {
    font-size: 22px;
  }

  .auth-page[data-auth-panel="login"] .auth-page__head {
    display: none;
  }

  .auth-page__head--inline .auth-page__inline-back {
    display: inline-flex;
  }

  .auth-page[data-auth-panel="findpass"] .auth-page__hero {
    display: none;
  }

  .auth-page[data-auth-panel="findpass"] .auth-page__main {
    margin-top: 0;
    border-radius: 0;
    min-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
  }
}

/* 平板 / 大屏手机命中上面的堆叠布局时，卡片仍需收窄居中，
   否则 auth_form 自身 400px 的内容宽度会被拉伸出的 sheet 甩在左侧，右侧大片空白（错位观感）。
   440 = 内容 400px + 左右各 20px padding，与桌面分栏宽度保持一致。 */
@media (min-width: 440px) and (max-width: 900px), (min-width: 440px) and (orientation: portrait) {
  .auth-page__main {
    /* 平板：表单卡片居中并留出上下呼吸空间，而不是贴上顶栏 */
    justify-content: center;
    padding: 12px var(--auth-gutter) calc(24px + var(--auth-kb-h, 0px));
    box-sizing: border-box;
  }

  .auth-page__form-wrap {
    max-width: 440px;
    margin: 0 auto;
    /* 平板是「卡片」形态：按内容高度收缩并居中，不撑满整屏 */
    flex: 0 1 auto;
    justify-content: flex-start;
    padding: 28px 24px calc(28px + var(--auth-kb-h, 0px));
    border-radius: 16px;
    border: 1px solid var(--c-border, rgba(0, 0, 0, 0.06));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  }
}

/* Page Builder auth_page layout modifiers */
.auth-page--center .auth-page__layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  margin: 0 auto;
}

.auth-page--center .auth-page__hero,
.auth-page--minimal .auth-page__hero,
.auth-page--no-hero .auth-page__hero {
  display: none;
}

.auth-page--minimal .auth-page__main,
.auth-page--center .auth-page__main {
  margin: 0 auto;
  width: 100%;
}

.auth-page--minimal {
  background: var(--c-surface, #fff);
}

@media (max-width: 900px), (orientation: portrait) {
  /* minimal：顶栏占位、标题在 sheet-head，避免绝对定位遮挡正文 */
  .auth-page--minimal[data-auth-panel="login"] .auth-page__mnav {
    position: sticky;
    top: 0;
    background: var(--c-bg, var(--c-surface, #fff));
    border-bottom: 0;
    pointer-events: auto;
  }

  .auth-page--minimal[data-auth-panel="login"] .auth-page__mnav-title {
    visibility: hidden;
  }

  .auth-page--minimal[data-auth-panel="login"] .auth-page__form-wrap {
    padding-top: 8px;
  }
}

/* === auth fields shared (findpass / findpass_msg; also in auth_modals) === */
/* auth_findpass_form/msg 使用 auth-field/auth-form；auth 布局不加载 auth_modals/style.css */
.auth-page .auth-form,
.auth-page [data-mac-findpass-form],
.auth-page [data-mac-findpass-send-form],
.auth-page [data-mac-findpass-reset-form] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 400px;
}

.auth-page .auth-field {
  display: block;
  margin-bottom: 14px;
}

.auth-page .auth-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted, #9499a0);
}

.auth-page .auth-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--c-border, #e3e5e7);
  border-radius: 10px;
  background: var(--c-surface-2, #f1f2f3);
  color: var(--c-text, #18191c);
  font: inherit;
  font-size: 14px;
}

.auth-page .auth-field__input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--c-accent-soft, var(--c-accent-border));
}

.auth-page .auth-field--captcha .auth-captcha {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-page .auth-captcha__img {
  flex: 0 0 auto;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--c-border, #e3e5e7);
  cursor: pointer;
  background: #fff;
}

.auth-page .auth-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.auth-page .auth-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.auth-page .auth-steps__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-muted, #9499a0);
}

.auth-page .auth-steps__item.is-on {
  color: var(--c-accent);
}

.auth-page .auth-steps__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.auth-page .auth-steps__item.is-on .auth-steps__num {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

.auth-page .auth-steps__line {
  width: 36px;
  height: 1px;
  background: var(--c-border, #e3e5e7);
}

.auth-page .auth-steps--compact {
  margin-bottom: 12px;
}

.auth-page .auth-findpass-msg {
  width: 100%;
  max-width: 400px;
}

@media (max-width: 768px), (orientation: portrait) {
  .auth-page .auth-form__row {
    grid-template-columns: 1fr;
  }

  .auth-page[data-auth-panel="findpass_msg"] .auth-page__hero {
    display: none;
  }

  .auth-page[data-auth-panel="findpass_msg"] .auth-page__main {
    margin-top: 0;
    border-radius: 0;
    min-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
  }
}