/* ===========================================================
   漫境 AiReelToon · 手机 APP 版 v2（ReelShort 质感重构）
   设计语言：纯黑玻璃 + 电影感海报 + 高对比排版 + 克制用色
   =========================================================== */

/* ---------- 全局基调 ---------- */
body.app {
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  max-width: 520px; margin: 0 auto;
  background: #050508;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.app.pl-open { padding-bottom: 0; }

/* 顶栏：悬浮玻璃 */
.app-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: rgba(5, 5, 8, .68);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.app-top .brand { font-size: 19px; font-weight: 900; letter-spacing: -.5px; display: flex; align-items: center; gap: 9px; }
.app-top .brand b {
  background: linear-gradient(92deg, #FFFFFF 20%, #FFC9D2 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-top .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, #FF375F 10%, #C9082F 95%);
  box-shadow: 0 5px 16px -4px rgba(255, 46, 77, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
}
.app-top .mark svg { width: 14px; height: 14px; color: #fff; }
.app-top .sp { flex: 1; }

.icon-btn {
  width: 35px; height: 35px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px; position: relative; color: #C9C9D6;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); border: 2px solid #0A0A0F; }

/* 金币胶囊（ReelShort 式金 gradient pill） */
.coin-pill {
  height: 32px; padding: 0 12px 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(160deg, #2B2008, #171207 80%);
  border: 1px solid rgba(255, 197, 61, .32);
  box-shadow: inset 0 1px 0 rgba(255, 224, 130, .18), 0 4px 14px -6px rgba(0, 0, 0, .8);
}
.coin-pill svg { width: 16px; height: 16px; }
.coin-pill i { font-style: normal; font-size: 12.5px; font-weight: 800; color: #FFD268; letter-spacing: .2px; }

#view { padding: 0 16px 24px; min-height: 70vh; }

/* 搜索入口：凹陷玻璃 */
.app-search {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 11px 15px; margin: 14px 0 16px; color: #6E6E82; font-size: 13.5px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
.app-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.app-search:active { background: rgba(255, 255, 255, .085); }

/* 口号条：极细一线 */
.app-slogan {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 0 0; padding: 8px 13px;
  border: 1px solid rgba(255, 46, 77, .16); border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 46, 77, .07), rgba(255, 46, 77, 0) 70%);
  font-size: 11.5px;
}
.app-slogan .as-name { color: #E8E8F0; font-weight: 800; letter-spacing: .2px; }
.app-slogan .as-txt {
  font-weight: 700; letter-spacing: .4px;
  background: linear-gradient(90deg, #FF5C76, #FFB13D);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #FF5C76;
}

/* ---------- 全幅轮播（核心质感位） ---------- */
.hero-wrap {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 14px -16px 0; padding: 0 16px;
  gap: 12px; scrollbar-width: none;
}
.hero-wrap::-webkit-scrollbar { display: none; }
.banner {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  height: 440px; border-radius: 20px; overflow: hidden;
  margin: 0; padding: 20px; cursor: pointer;
  display: flex; align-items: flex-end;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .85);
}
.banner .b-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5, 5, 8, .12) 26%, rgba(5, 5, 8, .55) 62%, rgba(5, 5, 8, .97) 96%);
}
.banner .b-badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(5, 5, 8, .5); color: #EDEDF4;
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.banner .c { position: relative; z-index: 2; width: 100%; }
.banner .c h3 {
  margin: 0 0 9px; font-size: 27px; font-weight: 900; letter-spacing: -.5px; line-height: 1.2;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .65);
}
.banner .b-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12px; color: #B9B9C8; margin-bottom: 16px; font-weight: 500;
}
.banner .b-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 24px; border-radius: 999px;
  background: linear-gradient(135deg, #FF375F, #E4183C);
  color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 12px 28px -8px rgba(255, 46, 77, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.banner .b-cta svg { width: 13px; height: 13px; }
.hero-dots { display: flex; gap: 6px; justify-content: center; margin: 13px 0 2px; }
.hero-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: .3s; }
.hero-dots i.on { width: 18px; background: #fff; }

/* ---------- 电影感海报（关键：全站封面调色） ---------- */
body.app .cover { border-radius: 13px; filter: saturate(.82) contrast(1.07) brightness(.88); }
body.app .cover::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 55% at 18% 0%, rgba(255, 255, 255, .16), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .45) 78%, rgba(0, 0, 0, .82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
body.app .cover::after {
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  padding: 30px 11px 10px; z-index: 2;
}
body.app .card .cover { box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .75); }
body.app .card .t { font-size: 13px; font-weight: 700; letter-spacing: -.1px; margin-top: 9px; }
body.app .card .m { font-size: 11px; color: #71717F; margin-top: 4px; }
body.app .card .rank { font-size: 36px; -webkit-text-stroke: 0; left: 9px; bottom: 30px; }
body.app .card .play-dot { width: 27px; height: 27px; background: rgba(5, 5, 8, .6); border: 1px solid rgba(255, 255, 255, .22); }

/* ---------- 区块标题：红标线 + 大字重 ---------- */
.app-sec { margin-bottom: 30px; }
body.app .sec-head { margin-bottom: 13px; }
body.app .sec-head h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
body.app .sec-head h2::before {
  content: ''; width: 4px; height: 15px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(180deg, #FF375F, #E4183C);
  box-shadow: 0 0 10px rgba(255, 46, 77, .45);
}
body.app .app-sec .sec-head h2 { font-size: 17.5px; }

/* ---------- 分类 chips ---------- */
.cat-strip { display: flex; gap: 9px; overflow-x: auto; padding: 16px 0 6px; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip .chip { padding: 8px 16px; }
body.app .chip {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #B4B4C4; font-size: 13px; font-weight: 600; padding: 8px 16px;
}
body.app .chip.on {
  background: linear-gradient(135deg, #FF375F, #E4183C);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px -6px rgba(255, 46, 77, .55);
}

/* ---------- 按钮质感 ---------- */
body.app .btn-primary {
  background: linear-gradient(135deg, #FF375F, #E4183C);
  box-shadow: 0 12px 26px -10px rgba(255, 46, 77, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
body.app .btn-ghost {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- 底部 Tab 栏 ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 520px; z-index: 70;
  display: flex;
  background: rgba(7, 7, 11, .82);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 0 9px; color: #5C5C6E; font-size: 10px; font-weight: 600; transition: .16s;
}
.tabbar a .ic { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; }
.tabbar a .ic svg { width: 100%; height: 100%; }
.tabbar a.on { color: #fff; }
.tabbar a.on .ic { color: #FF375F; filter: drop-shadow(0 5px 12px rgba(255, 46, 77, .55)); }
.tabbar a.on::after { content: ''; width: 14px; height: 2.5px; border-radius: 2px; margin-top: 1px;
  background: linear-gradient(90deg, #FF375F, #E4183C); }

/* ---------- 剧集详情（APP 版） ---------- */
.d-app { padding-top: 6px; }
.d-app-hero { display: flex; gap: 15px; margin-bottom: 20px; }
.d-app-hero .cover { flex: 0 0 124px; width: 124px; aspect-ratio: 3/4.2; }
.d-app-hero .cover::after { display: none; }
.d-app-hero .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.d-app-hero h1 { margin: 2px 0 6px; font-size: 21px; font-weight: 900; letter-spacing: -.4px; line-height: 1.22; }
.d-app-hero .en { font-size: 11.5px; color: #6E6E82; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-app-hero .meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 11.5px; color: #B4B4C4; margin-bottom: auto; }
.d-app-hero .meta span { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); padding: 4px 9px; border-radius: 8px; font-weight: 600; }
.d-app-intro { font-size: 13px; line-height: 1.8; color: #A8A8B8; margin-bottom: 22px; }

/* 分集 */
.ep-strip-app { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; }
.ep-strip-app::-webkit-scrollbar { display: none; }
.ep-b {
  flex: 0 0 auto; width: 76px; aspect-ratio: 3/4; border-radius: 13px; position: relative;
  background: #13131B; border: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 13.5px; font-weight: 800; color: #D8D8E4;
}
.ep-b small { font-size: 9.5px; color: #6E6E82; font-weight: 700; letter-spacing: .5px; }
.ep-b small:empty { display: none; }
.ep-b.cur {
  border-color: rgba(255, 46, 77, .75); color: #fff;
  background: linear-gradient(160deg, rgba(255, 46, 77, .22), rgba(255, 46, 77, .08));
  box-shadow: 0 8px 20px -8px rgba(255, 46, 77, .45);
}
.ep-b.lock { opacity: .55; }
.ep-b .lkl { position: absolute; top: 7px; right: 7px; font-size: 10px; }

/* ---------- 设置列表（个人中心） ---------- */
body.app .set-list {
  background: #101017; border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .9);
}
body.app .set-row { border-bottom: 1px solid rgba(255, 255, 255, .045); padding: 13px 16px; }
body.app .set-row .ic {
  width: 34px; height: 34px; border-radius: 11px; font-size: 15px;
  background: #191922; border: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
}
body.app .set-row .lb { font-size: 14px; font-weight: 600; }
body.app .profile-av { background: linear-gradient(140deg, #FF375F, #7C3AED); box-shadow: 0 10px 24px -10px rgba(255, 46, 77, .5); }

/* ---------- 榜单 ---------- */
body.app .rank-row { padding: 12px 10px; border-radius: 14px; }
body.app .rank-no { font-size: 17px; }
body.app .rank-no.top { background: linear-gradient(180deg, #FF5C76, #E4183C); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 21px; }
body.app .rank-title { font-weight: 800; }
.rank-intro { white-space: nowrap; text-overflow: ellipsis; }
.rank-badge { right: 8px; }

/* ---------- 徽章 ---------- */
body.app .badge { border-radius: 6px; letter-spacing: .5px; }
body.app .badge.hot { background: linear-gradient(135deg, #FF375F, #E4183C); }

/* ---------- 骨架/杂项 ---------- */
.pad-top { padding-top: 6px; }
#view ul { margin: 0; padding: 0; list-style: none; }
body.app .list-card, body.app .hw { background: #101017; border-color: rgba(255, 255, 255, .06); }
body.app ::-webkit-scrollbar { width: 0; height: 0; }

/* 旧 Stories 样式保留（当前未用） */
.stories { display: none; }

/* ---------- 签到横幅：玻璃质感（覆盖 points.css 渐变条） ---------- */
body.app .pt-banner {
  margin: 14px 0 0; padding: 11px 13px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3);
}
body.app .pt-banner .em { font-size: 20px; }
body.app .pt-banner .tt { font-size: 13px; font-weight: 700; letter-spacing: -.1px; }
body.app .pt-banner .ds { font-size: 11px; color: #6E6E82; margin-top: 2px; }
body.app .pt-banner .go {
  font-size: 12px; padding: 7px 14px;
  background: linear-gradient(135deg, #FF375F, #E4183C);
  box-shadow: 0 8px 18px -6px rgba(255, 46, 77, .5);
}
body.app .pt-banner .go.done { background: rgba(255, 255, 255, .07); color: #6E6E82; box-shadow: none; }

/* ---------- 口号条：单行紧凑 ---------- */
body.app .app-slogan { padding: 7px 12px; font-size: 11px; gap: 8px; white-space: nowrap; overflow: hidden; }
body.app .app-slogan .as-txt { overflow: hidden; text-overflow: ellipsis; }