@charset "UTF-8";
/* ==========================================================================
   个人中心专用样式（纯 CSS2：float / inline-block / text-align / table）
   --------------------------------------------------------------------------
   按兼容模式编写：不使用 display:flex / display:grid / 媒体查询里的布局 /
   calc() / CSS 变量。现代浏览器与 360 兼容模式渲染完全一致。
   加载顺序：home.css → site.css → profile.css → compat.css
   ========================================================================== */

/* ---- 通用块/行 ----
   注意：home.css 的 preflight 把 svg 设成了 display:block（旧站靠 flex 排版，
   svg 是不是块级都无所谓），CSS2 里图标要和文字排在同一行、或靠 text-align +
   line-height 在色块里居中，凡是这种图标都要显式改回 inline-block
   （与 recharge.css / mangadetail.css 的做法一致）。 */
.pf-clear:after { content: ""; display: block; clear: both; }
.pf-left { float: left; }
.pf-right { float: right; }
.pf-ib { display: inline-block; vertical-align: middle; }
.pf-block { display: block; }

/* 和文字排在同一行的图标，统一走这一组。两件事：
   1) display: inline-block 把 preflight 改成的块级 svg 拉回行内；
   2) top: -1px 上提 1px —— vertical-align: middle 是按「基线 + 半个 x 高度」对齐的，
      那是拉丁字母的视觉中心，中文方块字比 x 高度高得多，实测整块图标会低 1px
      （12/16/20px 图标、12/14/16px 字号都是一个数，偏差只跟字形有关，所以一个
      常数就能全部纠正）。CSS2 没有「middle 再往上一点」的写法，用相对定位微调
      最稳：只挪绘制位置、不参与排版，行高和周围元素一动不动（负 margin 会改
      margin 盒高度，图标本身撑行高时会把行压扁 2px）。
   这里只放「行内混排」的图标；色块里靠 text-align + line-height 居中、以及
   display:block + margin:auto 居中的图标不在内（见 .pf-entry-icon / .pf-stat .pf-icon）。 */
.pf-ib svg,
svg.pf-ib,
.pf-row .pf-l svg, .pf-row .pf-r svg,
.pf-vip-badge svg,
.pf-banner-info .pf-link svg,
.pf-section-head .pf-more svg,
.pf-wallet-link .pf-l svg, .pf-wallet-link .pf-r svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ---- 未登录门卡：块级 + margin 居中 ---- */
.pf-gate-wrap { text-align: center; padding: 72px 16px 48px; }
.pf-gate-card {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 40px;
  /* 卡片是 inline-block 收缩到内容宽的：正文「登录后即可查看收藏、历史记录、钱包等
     个人数据」自然宽约 390px，原来的 384px 正好差一个字换行、末行只剩一个「据」。
     放宽到 448px（Tailwind 的 max-w-md）留点余量，字体/字号略有出入也不会再断。 */
  max-width: 448px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.pf-gate-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom right, #fb923c, #f6339a);
  background-color: #f6339a;
  text-align: center;
  line-height: 80px;
  /* font-size: 0 把字体度量从行盒里去掉：vertical-align: middle 是拿「基线 + 半个
     x-height」对齐的，字号留着图标会落在正中偏下 2-3px。这块只装图标，没有文字。 */
  font-size: 0;
}
.pf-gate-icon svg { display: inline-block; vertical-align: middle; }

/* ---- 横幅（渐变 + 白字；float 头像 + 信息区） ---- */
.pf-banner {
  background-image: linear-gradient(to right, #ea580c, #9810fa 50%, #f6339a);
  background-color: #9810fa;   /* 老 IE 无渐变时的纯色兜底 */
}
.pf-banner-inner { max-width: 1024px; margin: 0 auto; padding: 32px 16px; }
.pf-banner-row { display: block; }
.pf-banner-row:after { content: ""; display: block; clear: both; }
.pf-avatar-btn {
  position: relative;
  display: block;
  float: left;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 76px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.pf-avatar-btn img { width: 100%; height: 100%; }
.pf-avatar-pending, .pf-avatar-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 76px;
}
.pf-avatar-hover { background-color: transparent; font-size: 0; }   /* 只装相机图标，同上 */
.pf-avatar-pending svg, .pf-avatar-hover svg { display: inline-block; vertical-align: middle; }
.pf-avatar-btn:hover .pf-avatar-hover { background-color: rgba(0, 0, 0, 0.3); }
.pf-banner-info { margin-left: 100px; color: #ffffff; padding-top: 4px; }
.pf-title-row { display: block; margin-bottom: 4px; }
.pf-title-row .pf-ib { vertical-align: middle; }
.pf-vip-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  background-color: #fe9a00;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}
.pf-vip-badge svg { margin-right: 2px; }   /* display/上提见顶部那一组 */
.pf-banner-info .pf-sub { color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.pf-banner-info .pf-link { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.8); font-size: 12px; text-decoration: none; }
.pf-banner-info .pf-link:hover { color: #ffffff; }
.pf-banner-info .pf-link svg { margin-right: 2px; }

/* ---- 主体容器（横幅下方，上移 16px） ---- */
.pf-body { max-width: 1024px; margin: -16px auto 0; padding: 0 16px 40px; }

/* ---- 通用栅格（纯 float，2/3/4 列） ---- */
.pf-grid-4 { display: block; }
.pf-grid-4:after { content: ""; display: block; clear: both; }
.pf-grid-4 > * {
  float: left;
  width: 24%;
  margin: 0 1.3333% 12px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pf-grid-4 > *:nth-child(4n) { margin-right: 0; }
.pf-grid-4 > *:nth-child(4n+1) { clear: left; }

.pf-grid-3 { display: block; }
.pf-grid-3:after { content: ""; display: block; clear: both; }
.pf-grid-3 > * {
  float: left;
  width: 32.3%;
  margin: 0 1% 16px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pf-grid-3 > *:nth-child(3n) { margin-right: 0; }
.pf-grid-3 > *:nth-child(3n+1) { clear: left; }

/* ---- 卡片 ---- */
.pf-card {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 20px;
}
.pf-stat {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.pf-stat:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.pf-stat .pf-icon { display: block; margin: 0 auto 6px; }
.pf-stat .pf-num { font-size: 18px; font-weight: 900; color: #111827; }
.pf-stat .pf-label { font-size: 12px; color: #9ca3af; }

/* ---- 钱包卡内行 ---- */
.pf-row { display: block; }
.pf-row:after { content: ""; display: block; clear: both; }
.pf-row.mb3 { margin-bottom: 12px; }
.pf-row .pf-l { float: left; }
.pf-row .pf-r { float: right; }
/* 余额卡 / VIP 卡右上的「充值 ›」「开通 ›」箭头：原来被 preflight 挤到第二行，
   现在由顶部那一组把 svg 拉回行内（见 recharge.css 同一处说明） */
.pf-balance { font-size: 24px; font-weight: 900; color: #111827; }

/* ---- 区块标题行 ---- */
.pf-section-head { display: block; margin-bottom: 12px; }
.pf-section-head:after { content: ""; display: block; clear: both; }
.pf-section-head .pf-t { float: left; font-size: 16px; font-weight: 700; color: #111827; line-height: 24px; }
.pf-section-head .pf-more { float: right; font-size: 12px; color: #f97316; text-decoration: none; line-height: 24px; }
.pf-section-head .pf-more:hover { color: #ea580c; }
.pf-section-head .pf-more svg { margin-left: 2px; }

/* ---- 功能入口卡 ---- */
.pf-entry {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.pf-entry:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.pf-entry .pf-entry-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 12px;
  text-align: center;
  line-height: 40px;
  font-size: 0;            /* 只装图标，见 .pf-gate-icon 的说明 */
}
.pf-entry .pf-entry-icon svg { display: inline-block; vertical-align: middle; }
.pf-entry .pf-entry-label { display: block; font-size: 14px; color: #374151; font-weight: 500; }
.pf-entry .pf-entry-count { display: block; font-size: 12px; color: #9ca3af; }

/* ---- 最近观看 / 收藏 封面卡 ---- */
.pf-cover-card { display: block; text-decoration: none; color: inherit; }
.pf-cover {
  position: relative;
  display: block;
  width: 100%;
  background-color: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  padding-top: 133.33%;   /* 3:4 高度（CSS2，无 aspect-ratio） */
  height: 0;
}
.pf-cover img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pf-cover .pf-cover-empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #d1d5db;
  font-size: 12px;
}
.pf-cover-card .pf-title { font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cover-card .pf-progress { font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 空态 ---- */
.pf-empty {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 40px 0;
  text-align: center;
}
.pf-empty .pf-empty-icon { display: block; margin: 0 auto 8px; }
.pf-empty .pf-empty-t { font-size: 14px; color: #9ca3af; }
.pf-empty .pf-empty-d { font-size: 12px; color: #d1d5db; margin-top: 4px; }

/* ---- 钱包明细入口条 ---- */
.pf-wallet-link {
  display: block;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 12px 20px;
  margin-top: 12px;
  text-decoration: none;
}
.pf-wallet-link:after { content: ""; display: block; clear: both; }
.pf-wallet-link:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
/* 左「钱包明细」/ 右「金币/钻石收支记录 ›」：与其它 .pf-l / .pf-r 一样左右分栏
   （本条的 :after 清浮动就是为它准备的，原来漏了 float，两段挤在左边） */
.pf-wallet-link .pf-l { float: left; font-size: 14px; font-weight: 500; color: #374151; }
.pf-wallet-link .pf-l svg { margin-right: 6px; }
.pf-wallet-link .pf-r { float: right; font-size: 12px; color: #9ca3af; }
.pf-wallet-link .pf-r svg { margin-left: 2px; }

/* ---- 头像上传弹窗（fixed + 居中，无 flex） ---- */
.pf-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  z-index: 100;
  padding: 16px;
}
.pf-dialog-card {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  width: 440px;
  max-width: 100%;
  margin-top: 48px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.pf-dialog-head { display: block; margin-bottom: 4px; }
.pf-dialog-head:after { content: ""; display: block; clear: both; }
.pf-dialog-head h3 { float: left; font-size: 18px; font-weight: 700; color: #111827; }
.pf-dialog-head .pf-x { float: right; }
.pf-dialog-sub { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.pf-pick {
  display: block;
  width: 100%;
  height: 208px;
  background-color: #f9fafb;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  padding-top: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pf-pick:hover { border-color: #fdba74; }
.pf-pick .pf-pick-icon { display: block; margin: 0 auto 8px; }
.pf-pick .pf-pick-t { font-size: 14px; color: #6b7280; }
.pf-pick .pf-pick-d { font-size: 12px; color: #9ca3af; }
.pf-dialog-btns { margin-top: 20px; }
.pf-dialog-btns:after { content: ""; display: block; clear: both; }
.pf-dialog-btns .pf-btn {
  display: block;
  float: left;
  width: 48%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.pf-dialog-btns .pf-btn + .pf-btn { float: right; }