/* ============================================
   Profile Tab - 个人中心（对标设计稿 V2）
   ============================================ */

#tab-profile {
  background: #0d0d0d;
  padding-bottom: calc(var(--tabbar-height, 52px) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

/* ---- 顶部导航栏（与 For You 一致）---- */

/* ---- 用户信息区 ---- */

/* 方形头像 — 蓝色边框 */

/* ---- 会员状态卡片 ---- */

/* ---- My Wallet 钱包卡片 ---- */

/* ---- Help & Feedback ---- */

.order-list {
  display: grid;
  gap: 12px;
}

/* ---- 功能入口列表 ---- */

/* ============================================
   Profile 子页面通用样式
   ============================================ */

@keyframes sub-page-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ---- 空状态 ---- */

/* ---- 收藏列表：三列网格卡片（复用 drama-card） ---- */
#favorites-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 10px 32px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  grid-auto-rows: max-content;
}

#favorites-list .drama-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease;
  background: transparent;
}

#favorites-list .drama-card:active {
  transform: scale(0.97);
}

#favorites-list .card-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #1c1c1e;
}

#favorites-list .card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#favorites-list .card-title {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  padding: 0 2px;
}

#favorites-list .card-badge {
  display: none;
}

/* ---- 播放历史：三列网格卡片（复用 drama-card） ---- */
#playlist-list .drama-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease;
  background: transparent;
}

#playlist-list .drama-card:active {
  transform: scale(0.97);
}

#playlist-list .card-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #1c1c1e;
}

#playlist-list .card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#playlist-list .card-title {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  padding: 0 2px;
}

#playlist-list .card-badge {
  display: none;
}

/* ---- 语言设置页 ---- */
/* 语言页导航 — 标题居中 */

/* Language 分区标题 */

/* ---- 法律文档阅读页 ---- */

/* ============================================
   Google 登录 - Sign In 按钮 + 登录弹窗
   ============================================ */

/* Profile 用户区的 Sign In 按钮 */

/* 登录弹窗 - 全屏蒙层 */

/* 底部 sheet 卡片 */

#google-signin-status {
  box-sizing: border-box;
  flex: 0 0 4.2em;
  width: 100%;
  height: 4.2em;
  overflow: hidden;
  text-align: center;
}

/* Private library vault */
.profile-vault { background: radial-gradient(circle at 78% 5%, rgba(218,175,72,.075), transparent 28rem), #090909; }
.profile-library-heading.profile-vault-heading { display: block; padding: 28px 18px 18px; }
.profile-vault-heading > p { margin: 0; color: #d9b45a; font-size: 9px; font-weight: 850; letter-spacing: .17em; }
.profile-vault-heading h1 { margin: 8px 0 10px; color: #fff8ea; font: 500 clamp(34px,10vw,54px)/.98 "Iowan Old Style", Georgia, serif; letter-spacing: -.035em; }
.profile-vault-heading h1 em { color: #e2be65; font-style: italic; }
.profile-vault-heading > span { display: block; max-width: 48ch; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.55; }
.profile-vault-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 20px; border: 1px solid rgba(216,173,74,.16); border-radius: 12px 3px 12px 3px; background: rgba(216,173,74,.035); }
.profile-vault-metrics div { padding: 11px 12px; border-right: 1px solid rgba(216,173,74,.12); }
.profile-vault-metrics div:last-child { border-right: 0; }
.profile-vault-metrics strong, .profile-vault-metrics span { display: block; }
.profile-vault-metrics strong { color: #f0cf78; font: 600 21px/1 Georgia,serif; }
.profile-vault-metrics span { margin-top: 5px; color: rgba(255,255,255,.42); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.profile-vault-loading { padding: 30px 18px; color: rgba(255,255,255,.36); font-size: 11px; text-align: center; }

.profile-library-section.profile-drama-shelf,
.profile-library-section.profile-purchase-section { min-height: 0; padding: 20px 0 22px 16px; border-top: 1px solid rgba(255,255,255,.065); background: transparent; }
.profile-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-right: 16px; margin-bottom: 15px; }
.profile-section-heading div > span { color: #bd9847; font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.profile-section-heading h2 { margin: 4px 0 0; color: #fff8ea; font: 500 25px/1.05 "Iowan Old Style",Georgia,serif; }
.profile-section-heading > strong { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: #dbba6e; border: 1px solid rgba(216,173,74,.2); border-radius: 50%; font: 650 11px ui-monospace,monospace; }
.profile-poster-row { display: flex; gap: 11px; overflow-x: auto; padding: 0 16px 6px 0; scroll-snap-type: x proximity; scrollbar-width: none; }
.profile-poster-row::-webkit-scrollbar { display: none; }
.profile-poster-card { flex: 0 0 128px; min-width: 0; color: #fff; scroll-snap-align: start; }
.profile-poster-card > div { position: relative; aspect-ratio: 2/3; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 12px 2px 12px 2px; background: linear-gradient(145deg,#25221b,#111); }
.profile-poster-card > div::after { position: absolute; inset: auto 0 0; height: 34%; content: ""; background: linear-gradient(transparent,rgba(0,0,0,.7)); }
.profile-poster-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.profile-poster-card > strong { display: -webkit-box; margin-top: 9px; overflow: hidden; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.profile-poster-card > span { display: block; margin-top: 4px; color: rgba(255,255,255,.42); font-size: 9px; }

.profile-purchase-grid { display: grid; gap: 8px; padding-right: 16px; }
.profile-purchase-card { display: grid; grid-template-columns: 56px minmax(0,1fr) 30px; gap: 12px; align-items: center; min-height: 82px; padding: 9px 10px 9px 9px; color: #fff; border: 1px solid rgba(216,173,74,.15); border-radius: 12px 3px 12px 3px; background: linear-gradient(110deg,rgba(216,173,74,.07),rgba(255,255,255,.018)); }
.profile-purchase-card > img { width: 56px; aspect-ratio: 2/3; object-fit: cover; border-radius: 7px 2px 7px 2px; background: #191713; }
.profile-purchase-card > div { min-width: 0; }
.profile-purchase-card small, .profile-purchase-card strong, .profile-purchase-card span { display: block; }
.profile-purchase-card small { color: #d9b45a; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.profile-purchase-card strong { margin-top: 5px; overflow: hidden; font: 500 16px/1.1 "Iowan Old Style",Georgia,serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-purchase-card span { margin-top: 5px; color: rgba(255,255,255,.43); font-size: 9px; }
.profile-purchase-card > i { display: grid; width: 28px; height: 28px; place-items: center; color: #141008; border-radius: 50%; background: #d8b45b; font-size: 14px; font-style: normal; }

.profile-ledger-grid { display: grid; gap: 12px; padding: 2px 16px 28px; }
.profile-ledger-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 14px 3px 14px 3px; background: rgba(255,255,255,.022); }
.profile-ledger-card > .profile-section-heading { margin: 0; padding: 17px; border-bottom: 1px solid rgba(255,255,255,.06); }
.profile-ledger-card .profile-section-heading h2 { font-size: 21px; }
.profile-ledger-list { display: grid; }
.profile-ledger-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 68px; padding: 10px 13px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.05); }
.profile-ledger-row:last-child { border-bottom: 0; }
.profile-ledger-row.is-linked:active { background: rgba(216,173,74,.06); }
.profile-ledger-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #e5c36d; border: 1px solid rgba(216,173,74,.19); border-radius: 9px 2px 9px 2px; background: rgba(216,173,74,.055); font-size: 13px; font-style: normal; }
.profile-ledger-icon--spend { color: #f88aa0; border-color: rgba(238,78,111,.2); background: rgba(238,78,111,.07); }
.profile-ledger-row > div { min-width: 0; }
.profile-ledger-row > div > strong, .profile-ledger-row > div > span { display: block; }
.profile-ledger-row > div > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-ledger-row > div > span { margin-top: 4px; overflow: hidden; color: rgba(255,255,255,.37); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-ledger-value { text-align: right; }
.profile-ledger-value > strong { font: 650 10px ui-monospace,monospace !important; }
.profile-ledger-value > span { color: #d6b45f !important; font-size: 7px !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.profile-ledger-value > span[data-status="PAID"] { color: #72d49c !important; }
.profile-ledger-value > span[data-status="FAILED"], .profile-ledger-value > span[data-status="CANCELED"] { color: #ef7790 !important; }

@media (min-width: 768px) {
  .profile-library-heading.profile-vault-heading { padding: 6px 0 30px; }
  .profile-vault-heading h1 { font-size: clamp(44px,4vw,62px); }
  .profile-vault-metrics { max-width: 600px; }
  .profile-library-section.profile-drama-shelf,
  .profile-library-section.profile-purchase-section { padding: 25px; border: 1px solid rgba(255,255,255,.075); border-radius: 5px 22px 5px 22px; background: rgba(255,255,255,.022); }
  .profile-section-heading { padding-right: 0; }
  .profile-poster-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; padding: 0; }
  .profile-poster-card { min-width: 0; }
  .profile-purchase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; }
  .profile-ledger-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; }
  .profile-poster-card:hover img { transform: scale(1.035); }
  .profile-purchase-card:hover, .profile-ledger-row.is-linked:hover { border-color: rgba(216,173,74,.3); background: rgba(216,173,74,.055); }}