/* ===========================================================
   漫境 AiReelToon · 共享设计系统
   品牌色：暗夜黑 + 品牌红 #FF2E4D + 电光紫 #7C3AED
   =========================================================== */
:root {
  --bg: #0B0B0F;
  --bg-2: #14141B;
  --bg-3: #1C1C26;
  --line: #262633;
  --txt: #FFFFFF;
  --txt-2: #9A9AAD;
  --txt-3: #6B6B7E;
  --brand: #FF2E4D;
  --brand-2: #FF6B3D;
  --purple: #7C3AED;
  --gold: #FFC53D;
  --ok: #22C55E;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --nav-h: 60px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2c2c3a; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 封面渐变色系（模拟海报） ---------- */
.cover { position: relative; overflow: hidden; background: #1a1a24; }
.cover::after {
  content: attr(data-t);
  position: absolute; inset: auto 0 0 0;
  padding: 8px 10px;
  font-size: 12px; font-weight: 700; line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c1  { background: linear-gradient(135deg,#3A1C71,#D76D77,#FFAF7B); }
.c2  { background: linear-gradient(135deg,#0F2027,#203A43,#2C5364); }
.c3  { background: linear-gradient(135deg,#41295a,#2F0743); }
.c4  { background: linear-gradient(135deg,#ee9ca7,#ffdde1); }
.c5  { background: linear-gradient(135deg,#232526,#414345); }
.c6  { background: linear-gradient(135deg,#8E0E00,#1F1C18); }
.c7  { background: linear-gradient(135deg,#654ea3,#eaafc8); }
.c8  { background: linear-gradient(135deg,#141E30,#243B55); }
.c9  { background: linear-gradient(135deg,#c31432,#240b36); }
.c10 { background: linear-gradient(135deg,#1f4037,#99f2c8); }
.c11 { background: linear-gradient(135deg,#4b6cb7,#182848); }
.c12 { background: linear-gradient(135deg,#b9935a,#4a2f1b); }
.c13 { background: linear-gradient(135deg,#0f0c29,#302b63,#24243e); }
.c14 { background: linear-gradient(135deg,#1c1c1c,#4b1d1d); }
.c15 { background: linear-gradient(135deg,#f7971e,#ffd200); }
.c16 { background: linear-gradient(135deg,#200122,#6f0000); }
.c17 { background: linear-gradient(135deg,#000000,#434343); }
.c18 { background: linear-gradient(135deg,#ff512f,#dd2476); }
.c19 { background: linear-gradient(135deg,#355c7d,#6c5b7b,#c06c84); }
.c20 { background: linear-gradient(135deg,#2193b0,#6dd5ed); }
.c21 { background: linear-gradient(135deg,#2b1055,#7597de); }
.c22 { background: linear-gradient(135deg,#ff0099,#493240); }
.c23 { background: linear-gradient(135deg,#134e5e,#71b280); }
.c24 { background: linear-gradient(135deg,#5f2c82,#49a09d); }

/* ---------- 通用组件 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 5px; line-height: 1.4;
  background: var(--brand); color: #fff;
}
.badge.gold { background: var(--gold); color: #241a00; }
.badge.purple { background: var(--purple); color: #fff; }
.badge.ghost { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.badge.hot { background: linear-gradient(135deg,#FF2E4D,#FF6B3D); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-3); color: var(--txt-2);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: .18s;
}
.chip:hover { color: #fff; background: #242432; }
.chip.on { background: #fff; color: #0B0B0F; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; transition: .18s;
}
.btn-primary { background: linear-gradient(135deg,var(--brand),var(--brand-2)); color: #fff; }
.btn-primary:active { transform: scale(.97); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-block { width: 100%; }

.star { color: var(--gold); font-size: 12px; }
.views { color: var(--txt-3); font-size: 12px; }

/* 骨架占位（无图时） */
.ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 26px; opacity: .5; }

/* ---------- 剧集卡（竖版海报） ---------- */
.card { flex: 0 0 auto; width: 138px; cursor: pointer; }
.card .cover { width: 100%; aspect-ratio: 3/4.2; border-radius: var(--r); }
.card .t { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.35;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .m { margin-top: 5px; font-size: 11.5px; color: var(--txt-3); display: flex; align-items: center; gap: 6px; }
.card .tagline { position: absolute; top: 8px; left: 8px; z-index: 2; }
.card .rank {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  font-size: 30px; font-weight: 900; font-style: italic;
  color: #fff; -webkit-text-stroke: 2px rgba(0,0,0,.6);
  text-shadow: 0 3px 10px rgba(0,0,0,.7); line-height: 1;
}
.card .play-dot {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* ---------- 横向滚动容器 ---------- */
.rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 6px; scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ---------- 区块标题 ---------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.sec-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.sec-head .more { font-size: 12.5px; color: var(--txt-2); display: flex; align-items: center; gap: 4px; }
.sec-head .more:hover { color: #fff; }

/* ---------- 遮罩 & 面板 ---------- */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: .24s; }
.mask.on { opacity: 1; pointer-events: auto; }

/* ---------- 动画 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.fade-up { animation: fadeUp .38s cubic-bezier(.22,.8,.35,1) both; }

/* ---------- 空白状态 ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--txt-3); }
.empty .em { font-size: 44px; margin-bottom: 12px; }
.empty p { margin: 0; font-size: 13.5px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  background: rgba(28,28,38,.96); color: #fff; border: 1px solid var(--line);
  padding: 11px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  z-index: 200; opacity: 0; pointer-events: none; transition: .26s; white-space: nowrap;
  box-shadow: var(--shadow);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================
   共享组件（网站版 + APP 版通用）
   =========================================================== */

/* 榜单行 */
.rank-row {
  display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--r);
  transition: .18s; cursor: pointer; position: relative;
}
.rank-row:hover { background: var(--bg-2); }
.rank-no { flex: 0 0 34px; text-align: center; font-size: 19px; font-weight: 900; font-style: italic; color: var(--txt-3); }
.rank-no.top { color: var(--brand); font-size: 23px; }
.rank-row .cover { flex: 0 0 62px; width: 62px; aspect-ratio: 3/4.2; border-radius: 10px; }
.rank-row .cover::after { display: none; }
.rank-info { flex: 1; min-width: 0; }
.rank-title { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.rank-meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--txt-3); margin-bottom: 7px; }
.rank-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--txt-3); }
.rank-intro { font-size: 12.5px; color: var(--txt-2); line-height: 1.5; overflow: hidden; }
.rank-badge { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* 热搜词 */
.hot-words { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.hw { padding: 8px 15px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line);
      font-size: 13px; color: var(--txt-2); cursor: pointer; transition: .16s; }
.hw:hover { background: var(--bg-3); color: #fff; }
.hw b { color: var(--brand); margin-right: 5px; font-size: 12px; }

/* 演员阵容 */
.cast { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.cast-item { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line);
             padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 13px; }
.cast-item .face { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#3a3a52,#20202c);
                   display: flex; align-items: center; justify-content: center; font-size: 15px; }

/* 设置列表 */
.set-list { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 17px 20px; cursor: pointer; transition: .15s;
           border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row:hover { background: var(--bg-3); }
.set-row .ic { font-size: 17px; width: 24px; text-align: center; }
.set-row .lb { flex: 1; font-size: 14px; font-weight: 600; }
.set-row .vl { font-size: 13px; color: var(--txt-3); }
.set-row .ar { color: var(--txt-3); font-size: 15px; }

/* 个人头像（个人中心） */
.profile-av { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg,var(--purple),var(--brand));
              display: flex; align-items: center; justify-content: center; font-size: 34px; flex: 0 0 auto; }

/* 卡片进度条（继续观看） */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 4; }
.progress i { display: block; height: 100%; background: var(--brand); }

/* 我的片单卡 */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; }
.list-card { display: flex; gap: 14px; background: var(--bg-2); border: 1px solid var(--line);
             border-radius: var(--r); padding: 12px; cursor: pointer; transition: .18s; }
.list-card:hover { background: var(--bg-3); transform: translateY(-2px); }
.list-card .cover { flex: 0 0 76px; width: 76px; aspect-ratio: 3/4.2; border-radius: 10px; }
.list-card .cover::after { display: none; }
.list-card .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.list-card .nm { font-size: 14.5px; font-weight: 700; line-height: 1.35;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-card .mt { font-size: 11.5px; color: var(--txt-3); }

/* ===== 品牌口号（2026-10-06 定档：漫境 AiReelToon —— 故事拍好了，漫境开场） ===== */
.foot-slogan {
  display: inline-block; margin-bottom: 14px; font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(90deg, var(--brand) 10%, var(--gold) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand);
}