/* ══════════════════════════════════════════════════════════════════════
   红果短剧 H5 · pages.css · 三页布局 · 首页播放页 / 剧场 / 我的
   ────────────────────────────────────────────────────────────────────────
   首页全出血舞台 + 上下遮罩 + 右栏局部轻暗底；剧场搜索/分类/功能胶囊/卡片网格；我的页薄荷奶油头图 + 内容面板 + 双层标签 + 3 列网格。用 flex 流式布局，不按坐标绝对定位。
   本文件内容与定稿预览稿逐字相同（仅拆文件、不改任何视觉数值）。
   <link> 加载顺序：tokens → base → components → pages → responsive（勿调整，
   顺序即原 <style> 内的层叠顺序，调整会改变覆盖关系并破坏像素一致性）。
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   分节 6 · 首页 · 播放页（全出血视频舞台；不套白卡；上下遮罩）
   底图改用 hero-clean.jpg 纯净人物剧照（无任何原 App UI，不会双层重影），
   经 ::after 以 cover/center 铺满；原 CSS 多层渐变保留为加载失败兜底，
   仍不引用含内嵌 UI 的 hero-still.jpg。换图只改 ASSETS.heroClean 一处。
   ══════════════════════════════════════════════════════════════════════ */
.hg-home-layout{ position:relative; }
.hg-feed{ position:relative; }
/* 舞台底边 = 859（100dvh - 90px Tab 栏），CTA 落在 815–859 区间（§8.1） */
.hg-feed__item{
  height:calc(100vh - var(--tabbar-total));
  height:calc(100dvh - var(--tabbar-total));
}
.hg-feed-card{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--bg-dark-tabbar);
}
/* 首页视频舞台：真实纯净人物剧照（路径由 ASSETS.heroClean 注入 --hg-hero）铺满最上层。
   本体保留多层渐变 + 实色 background-color 作兜底 —— 图片加载失败时不黑屏。
   ::before 柔光斑属于原 CSS 模拟画面，会被 ::after 的真实剧照盖住；
   若图片缺失则自动露出原渐变模拟画面，依旧零外部依赖。
   层级：底图(z0) → 上下渐变遮罩(z1) → 信息/操作层(z2/3) → Tab，不变。 */
.hg-feed-card__visual{
  position:absolute; inset:0; z-index:0;
  background-color:var(--bg-dark-tabbar);
  background-image:
    radial-gradient(52% 30% at 50% 34%, rgba(255,214,170,.50) 0%, rgba(255,214,170,0) 72%),
    radial-gradient(38% 26% at 23% 60%, rgba(122,84,64,.62) 0%, rgba(122,84,64,0) 74%),
    radial-gradient(42% 30% at 79% 66%, rgba(74,96,104,.58) 0%, rgba(74,96,104,0) 74%),
    radial-gradient(80% 55% at 50% 92%, rgba(20,18,20,.85) 0%, rgba(20,18,20,0) 80%),
    linear-gradient(165deg,#3B2C27 0%,#5A4038 30%,#3A4447 58%,#171A1D 100%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* 真实剧照层：cover 铺满、居中（等效 object-fit:cover）；--hg-hero 由启动时注入，
   未注入时 var(...,none) → 无图片，直接露出上面的渐变兜底，不产生 file:// 404 */
.hg-feed-card__visual::after{
  content:""; position:absolute; inset:0;
  background-image:var(--hg-hero, none);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hg-feed-card__visual::before{
  content:""; position:absolute; left:18%; top:28%; width:64%; height:40%;
  border-radius:50%; filter:blur(48px);
  background:radial-gradient(circle,rgba(255,228,190,.34),rgba(255,228,190,0) 70%);
}
/* 落地时替换为真实 <video> 的节点（预览保留类名与 aria，见 §2.1.3） */
.hg-feed-card__video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
/* 真实封面图：每个 feed item 由 JS 注入；渐变兜底作加载失败背景，::after(--hg-hero) 透明不遮 */
.hg-feed-card__cover{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; background:var(--bg-dark-tabbar); }
/* 首页加载骨架条（真实数据到达前占位） */
.hg-skeleton__bar{ height:18px; border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.24),rgba(255,255,255,.10));
  background-size:200% 100%; animation:hg-shimmer 1.2s linear infinite; }
@keyframes hg-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hg-feed-card__overlay-top{
  position:absolute; left:0; right:0; top:0; height:180px; z-index:1;
  background:var(--overlay-top); pointer-events:none;
}
.hg-feed-card__overlay-bottom{
  position:absolute; left:0; right:0; bottom:0; height:360px; z-index:1;
  background:var(--overlay-bottom); pointer-events:none;
}
.hg-feed-card__topbar{
  position:absolute; top:var(--status-h); left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px var(--gutter-func); color:var(--on-video-white);
}
.hg-feed-card__menu,.hg-feed-card__search{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--on-video-white); transition:transform .18s ease,opacity .18s ease;
}
.hg-feed-card__menu:active,.hg-feed-card__search:active{ transform:scale(.9); opacity:.7; }
.hg-feed-card__menu .hg-ico,.hg-feed-card__search .hg-ico{ width:22px; height:22px; }
.hg-feed-card__subtitle{
  position:absolute; left:16px; right:16px; top:59%; z-index:3; text-align:center;
  font-size:18px; font-weight:600; line-height:26px; color:var(--on-video-white);
  text-shadow:var(--shadow-on-video);
}
.hg-feed-card__actions{
  position:absolute; right:12px; bottom:186px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  color:var(--on-video-white);
}
/* 局部轻暗底：只压右侧竖排数字落在明亮路面/天空上的对比，
   不动 --overlay-top / --overlay-bottom 整体遮罩、不给整屏加暗。
   用 ::before 外扩而非给容器加 padding，图标盒模型与位置 0 偏移；
   270deg 由右向左淡出，避免出现硬边矩形暗块。 */
.hg-feed-card__actions::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-10px; right:-10px; bottom:-10px; left:-30px;
  border-radius:var(--radius-card);
  background:linear-gradient(270deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.16) 48%, rgba(0,0,0,0) 100%);
}
.hg-feed-card__action{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:44px; min-height:44px; color:var(--on-video-white);
  text-shadow:var(--shadow-on-video);
  transition:transform .18s ease,opacity .18s ease;
}
.hg-feed-card__action:active{ transform:scale(.9); opacity:.75; }
.hg-feed-card__action .hg-ico{
  width:32px; height:32px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.hg-feed-card__action-count{ font-size:12px; font-weight:600; line-height:16px; }
.hg-feed-card__meta{
  position:absolute; left:var(--gutter-func); bottom:calc(var(--cta-h) + 22px); z-index:3;
  width:calc(100% - 90px); color:var(--on-video-white);
  text-shadow:var(--shadow-on-video);
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.hg-feed-card__title{
  margin:0; font-size:18px; font-weight:600; line-height:26px; color:var(--on-video-white);
}
.hg-feed-card__title .hg-chev{ width:14px; height:14px; display:inline-block; vertical-align:-2px; }
.hg-feed-card__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.hg-feed-card__desc{
  margin:0; font-size:13px; font-weight:400; line-height:20px; color:var(--on-video-white);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hg-feed-card__expand{
  font-size:13px; color:var(--on-video-white); text-decoration:underline;
  min-height:44px; display:inline-flex; align-items:center;
}
.hg-feed-card__notice{ margin:0; }
/* D3 预留槽位：默认 hidden，关闭时不占位、不报错（体验规范 §3.3.2） */
.hg-feed-card__badge,.hg-feed-card__heat,.hg-feed-card__ai{ position:absolute; z-index:3; }
/* 首页搜索浮层（点击顶部搜索图标唤起；mock 阶段本地占位过滤，不发起请求、不弹窗） */
.hg-home-search{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; background:var(--bg-page);
}
.hg-home-search[hidden]{ display:none; }
.hg-home-search__bar{
  display:flex; align-items:center; gap:10px;
  min-height:var(--status-h); padding:8px var(--gutter-func);
  background:var(--bg-card); box-shadow:var(--shadow-card);
}
.hg-home-search__bar > .hg-ico{ width:18px; height:18px; color:var(--placeholder); flex:none; }
.hg-home-search__input{
  flex:1; min-width:0; height:36px; border:0; outline:none; background:transparent;
  font-size:15px; color:var(--text-primary);
}
.hg-home-search__input::placeholder{ color:var(--placeholder); }
.hg-home-search__close{
  flex:none; width:32px; height:32px; font-size:22px; line-height:1;
  color:var(--text-secondary); background:transparent;
}
.hg-home-search__results{ flex:1; overflow-y:auto; padding:12px var(--gutter-func) 24px; }
.hg-home-search__hint{ font-size:13px; color:var(--text-secondary); padding:8px 4px; }
.hg-home-search__item{
  display:flex; align-items:center; gap:12px; width:100%; min-height:64px;
  padding:8px 4px; background:transparent; text-align:left;
  border-bottom:1px solid var(--divider);
}
.hg-home-search__poster{ width:44px; height:60px; border-radius:8px; object-fit:cover; flex:none; background:var(--bg-page); }
.hg-home-search__title{ flex:1; font-size:15px; font-weight:500; color:var(--text-primary); }
.hg-home-search__meta{ font-size:12px; color:var(--text-secondary); flex:none; }
/* 移动端：首页信息流竖向整屏吸附（同红果上下滑切剧）；PC 为双栏布局不受影响 */
@media (max-width:1023px){
  .hg-feed{ height:calc(100vh - var(--tabbar-total)); height:calc(100dvh - var(--tabbar-total)); overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; }
  .hg-feed__item{ scroll-snap-align:start; }
}
.hg-cta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:8px; width:100%; min-height:var(--cta-h);
  padding:0 var(--gutter) 8px; background:var(--cta-bg);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  color:var(--on-video-white); font-size:15px; font-weight:500; line-height:22px;
  transition:transform .18s ease,opacity .18s ease;
}
.hg-cta:active{ transform:scale(.985); opacity:.9; }
.hg-cta__play{ width:16px; height:16px; display:flex; }
.hg-cta__play .hg-ico{ width:16px; height:16px; }
.hg-cta__chev{ margin-left:auto; width:14px; height:14px; display:flex; }
.hg-cta__chev .hg-ico{ width:14px; height:14px; }
.hg-cta__progress{
  position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--progress-track); border-radius:1px;
}
.hg-cta__progress::before{
  content:""; display:block; width:8%; height:100%; background:var(--on-video-white);
}
.hg-cta__progress::after{
  content:""; position:absolute; left:8%; top:-2px; width:6px; height:6px;
  border-radius:50%; background:var(--on-video-white);
}
/* PC 信息侧栏（§9.2）：移动端不显示 */
.hg-home-side{ display:none; }

/* ══════════════════════════════════════════════════════════════════════
   分节 7 · 剧场页（浅色：搜索框 + 分类 + 4 功能胶囊 + 2 列卡片网格）
   ══════════════════════════════════════════════════════════════════════ */
.hg-theater{ position:relative; min-height:100dvh; background:var(--bg-page); }
.hg-theater__top{
  position:absolute; left:0; right:0; top:0; height:200px; z-index:0;
  background:linear-gradient(180deg,var(--theater-top) 0%,var(--mint-1) 8%,var(--bg-card) 18%,var(--bg-page) 100%);
  pointer-events:none;
}
.hg-theater__search{
  position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  height:var(--search-h); margin:var(--status-h) var(--gutter-func) 0;
  padding:0 10px 0 12px; border-radius:14px;
  background:var(--bg-card); box-shadow:var(--shadow-search);
}
.hg-theater__search > .hg-ico{ width:16px; height:16px; color:var(--placeholder); flex:none; }
.hg-theater__search-input{
  flex:1; min-width:0; height:100%; border:0; outline:none; background:transparent;
  font-size:14px; color:var(--text-primary);
}
.hg-theater__search-input::placeholder{ color:var(--placeholder); }
.hg-theater__search-input:focus{ box-shadow:0 0 0 2px rgba(255,107,0,.25); border-radius:8px; }
.hg-theater__search-chip{
  flex:none; padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--bg-page); color:var(--text-secondary); font-size:12px;
  transition:transform .18s ease,opacity .18s ease;
}
.hg-theater__search-chip:active{ transform:scale(.94); opacity:.75; }
.hg-theater__search-feedback{
  position:relative; z-index:2; margin:6px var(--gutter-func) 0;
  font-size:11px; line-height:16px; color:var(--text-secondary);
}
.hg-theater__cats{
  position:relative; z-index:2; display:flex; align-items:center; gap:20px;
  margin:14px 0 0; padding:0 var(--gutter-func) 4px;
  overflow-x:auto; scrollbar-width:none;
}
.hg-theater__cats::-webkit-scrollbar,.hg-mine__funcs::-webkit-scrollbar{ display:none; }
.hg-theater__cat{
  flex:none; min-height:44px; display:flex; align-items:center; gap:6px;
  font-size:16px; font-weight:400; line-height:24px; color:var(--text-tertiary);
  white-space:nowrap; transition:transform .18s ease,opacity .18s ease;
}
.hg-theater__cat:active{ transform:scale(.96); opacity:.75; }
.hg-theater__cat.is-active{ font-size:22px; font-weight:700; line-height:30px; color:var(--text-primary); }
.hg-theater__cat.is-active::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--tab-icon-gradient); flex:none;
}
.hg-theater__drama-cats{
  position:relative; z-index:2; display:flex; gap:8px; padding:8px var(--gutter-func);
}
.hg-theater__funcs{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; margin:12px var(--gutter-func) 0;
}
.hg-theater__func{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:var(--func-pill-h); border-radius:var(--radius-pill);
  background:var(--bg-card); box-shadow:var(--shadow-card);
  color:var(--text-primary); font-size:15px; font-weight:600; line-height:22px;
  transition:transform .18s ease,opacity .18s ease;
}
/* 视觉高度保持 36px，用透明伪元素把热区扩到 ≥44px（§5.2，不改视觉尺寸） */
.hg-theater__func::before{ content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px; }
.hg-theater__func:active{ transform:scale(.96); opacity:.85; }
.hg-theater__func-icon{
  width:24px; height:24px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.hg-theater__func-icon .hg-ico{ width:14px; height:14px; color:var(--bg-card); }
.hg-theater__func--filter .hg-theater__func-icon{ background:linear-gradient(135deg,var(--icon-filter),var(--icon-filter-2)); }
.hg-theater__func--rank   .hg-theater__func-icon{ background:linear-gradient(135deg,var(--icon-rank),var(--icon-rank-2)); }
.hg-theater__func--new    .hg-theater__func-icon{ background:linear-gradient(135deg,var(--icon-new),var(--icon-new-2)); }
.hg-theater__func--reserve .hg-theater__func-icon{ background:linear-gradient(135deg,var(--icon-book),var(--icon-book-2)); }
.hg-theater__grid{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--row-gap) var(--grid-gap); padding:12px var(--gutter-grid) 24px;
}
.hg-drama-card{
  position:relative; background:var(--bg-card); border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hg-drama-card:active{ transform:scale(.995); }
.hg-drama-card__poster{
  position:relative; width:100%; aspect-ratio:var(--poster-ratio-theater);
  border-radius:var(--radius-poster-theater); overflow:hidden; background:var(--bg-page);
}
/* 偏方海报（370×385）用 cover + 上对齐，避免底部留白边；无白边、无变形 */
.hg-drama-card__poster img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
/* 【已停用】CSS 重画的「彩色设计占位」：样式定义保留备用，
   本轮剧场 / 我的页 6 格全部改用真实海报，渲染逻辑不再生成该节点。
   保留它仅为区别于 drama-02 / theater-01..04 那种「图片未加载」灰色占位块的定义参考 */
.hg-poster--mock{
  background:
    radial-gradient(80% 55% at 28% 22%, var(--mint-1) 0%, transparent 72%),
    radial-gradient(70% 55% at 78% 74%, var(--cream) 0%, transparent 72%),
    linear-gradient(155deg, var(--cream-base) 0%, var(--theater-top) 48%, var(--mint-2) 100%);
}
.hg-poster--mock::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:20px solid var(--brand-orange);
  border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.hg-drama-card__poster-shade{
  position:absolute; left:0; right:0; bottom:0; height:60px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}
.hg-drama-card__heat{ position:absolute; left:8px; bottom:8px; z-index:2; }
.hg-drama-card__ai{ position:absolute; right:8px; bottom:8px; z-index:2; }
.hg-drama-card__body{
  height:70px; padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px;
}
.hg-drama-card__title{
  margin:0; font-size:15px; font-weight:600; line-height:22px; color:var(--text-primary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hg-drama-card__rank-chip{ align-self:flex-start; }
.hg-drama-card__collection-entry{ position:absolute; right:8px; top:8px; }

/* ══════════════════════════════════════════════════════════════════════
   分节 8 · 我的页（薄荷/奶油氛围头图 + 白色内容面板 + 双层标签 + 3 列网格）
   ══════════════════════════════════════════════════════════════════════ */
.hg-mine{ position:relative; min-height:100dvh; background:var(--bg-page); }
.hg-mine__header{
  position:relative; height:300px;
  background:
    radial-gradient(120% 80% at 0% 0%,   var(--mint-1) 0%, rgba(220,246,236,0) 60%),
    radial-gradient(90% 70%  at 100% 12%,var(--mint-2) 0%, rgba(182,242,236,0) 65%),
    radial-gradient(100% 45% at 50% 16%, var(--cream)  0%, rgba(251,230,210,0) 70%),
    linear-gradient(180deg,var(--cream-base) 0%,var(--bg-page) 100%);
}
.hg-mine__top-icons{
  position:absolute; right:24px; top:60px; display:flex; gap:24px;
  color:var(--text-primary);
}
.hg-mine__top-icons button{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease,opacity .18s ease;
}
.hg-mine__top-icons button:active{ transform:scale(.9); opacity:.7; }
.hg-mine__top-icons .hg-ico{ width:22px; height:22px; }
.hg-mine__profile{ position:relative; margin-top:-190px; padding:0 var(--gutter-mine); }
.hg-mine__avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  background:var(--bg-card); box-shadow:var(--shadow-card);
}
.hg-mine__name{ margin-top:10px; font-size:20px; font-weight:600; line-height:28px; }
.hg-mine__uid{
  display:flex; align-items:center; gap:4px;
  font-size:12px; line-height:18px; color:var(--text-secondary);
}
.hg-mine__uid .hg-ico{ width:12px; height:12px; }
.hg-mine__stats{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px; padding-right:0;
}
.hg-mine__stats-left{ display:flex; gap:64px; }
.hg-mine__stat{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.hg-stat-num{ font-size:20px; font-weight:700; line-height:26px; color:var(--text-primary); }
.hg-stat-label{ font-size:12px; line-height:18px; color:var(--text-secondary); }
.hg-mine__edit-profile{
  min-height:44px; padding:0 16px; border-radius:var(--radius-card);
  background:var(--bg-card); box-shadow:var(--shadow-card);
  font-size:13px; font-weight:600; line-height:20px; color:var(--text-primary);
  transition:transform .18s ease,opacity .18s ease;
}
.hg-mine__edit-profile:active{ transform:scale(.96); opacity:.85; }
.hg-mine__funcs{
  display:flex; gap:14px; margin:24px 0 0; padding:0 var(--gutter-mine) 4px;
  overflow-x:auto; scrollbar-width:none;
}
.hg-mine__func{
  flex:1 1 0; min-width:0; height:72px; border-radius:var(--radius-card);
  background:var(--bg-card); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform .18s ease,opacity .18s ease;
}
.hg-mine__func:active{ transform:scale(.96); opacity:.85; }
.hg-mine__func-title{ font-size:15px; font-weight:600; line-height:22px; }
.hg-mine__func-sub{ font-size:11px; font-weight:400; line-height:16px; color:var(--text-secondary); }
.hg-mine__panel{
  position:relative; margin-top:16px; min-height:520px;
  border-radius:var(--radius-panel) var(--radius-panel) 0 0;
  background:var(--bg-card); padding:16px var(--gutter-mine) 24px;
}
.hg-mine__tabs-primary,.hg-mine__tabs-secondary{
  display:flex; align-items:center; gap:20px; overflow-x:auto; scrollbar-width:none;
}
.hg-mine__tabs-primary::-webkit-scrollbar,.hg-mine__tabs-secondary::-webkit-scrollbar{ display:none; }
.hg-mine__tab{
  flex:none; min-height:44px; display:flex; align-items:center;
  font-size:16px; font-weight:400; line-height:24px; color:var(--text-tertiary);
  transition:transform .18s ease,opacity .18s ease;
}
.hg-mine__tab:active{ transform:scale(.96); opacity:.75; }
.hg-mine__tab.is-active{ font-weight:700; color:var(--text-primary); }
.hg-mine__tabs-secondary .hg-mine__tab{ font-size:15px; line-height:22px; }
.hg-mine__tabs-secondary .hg-mine__tab.is-active{ font-weight:600; }
.hg-mine__tab--action{ font-weight:600; color:var(--text-primary); }
/* 仅首个动作项承担向右推动，使「预约/编辑」动作组整体靠右且彼此相邻（避免多 auto 外边距平分空隙导致 PC 宽屏拉开） */
.hg-mine__tab--action-first{ margin-left:auto; }
.hg-mine__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--row-gap-mine) var(--grid-gap-mine); margin-top:14px;
}
.hg-history-card{ position:relative; }
.hg-history-card__poster{
  position:relative; width:100%; aspect-ratio:var(--poster-ratio-mine);
  border-radius:var(--radius-poster-mine); overflow:hidden; background:var(--bg-page);
}
.hg-history-card__poster img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.hg-history-card__title{
  margin:6px 0 0; font-size:15px; font-weight:500; line-height:22px; color:var(--text-primary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hg-history-card__progress{ margin-top:2px; }
.hg-collection{ margin-top:16px; }

/* ══════════════════════════════════════════════════════════════════════
   分节 9 · 直播页（浅色：分类 tablist + 频道卡片网格）
   频道卡片按 accent 配渐变底色（预览视觉，不进接口字段）；
   「直播」红标走 --badge-gradient，与剧场【爆剧】同源；点击频道预览内联 toast。
   ══════════════════════════════════════════════════════════════════════ */
.hg-live{ position:relative; min-height:100dvh; background:var(--bg-page); }
.hg-live__header{
  position:relative; z-index:2; padding:calc(var(--status-h) + 12px) var(--gutter-mine) 4px;
}
.hg-live__title{ margin:0; font-size:22px; font-weight:700; line-height:30px; color:var(--text-primary); }
.hg-live__subtitle{ margin:4px 0 0; font-size:13px; font-weight:400; line-height:20px; color:var(--text-secondary); }
.hg-live__cats{
  position:relative; z-index:2; display:flex; align-items:center; gap:18px;
  margin:14px 0 12px; padding:0 var(--gutter-mine) 4px;
  overflow-x:auto; scrollbar-width:none;
}
.hg-live__cats::-webkit-scrollbar{ display:none; }
.hg-live__cat{
  flex:none; min-height:44px; display:flex; align-items:center; gap:6px;
  font-size:16px; font-weight:400; line-height:24px; color:var(--text-tertiary);
  white-space:nowrap; transition:transform .18s ease,opacity .18s ease;
}
.hg-live__cat:active{ transform:scale(.96); opacity:.75; }
.hg-live__cat.is-active{ font-size:20px; font-weight:700; line-height:28px; color:var(--text-primary); }
.hg-live__cat.is-active::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--tab-icon-gradient); flex:none;
}
.hg-live__grid{
  position:relative; z-index:2; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--row-gap) var(--grid-gap); padding:4px var(--gutter-mine) 24px;
}
/* 频道卡片：竖向，渐变底色 + 直播红标 + 频道名 + 播放圆钮 */
.hg-live__channel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:96px; padding:12px 14px; border-radius:var(--radius-card); overflow:hidden;
  box-shadow:var(--shadow-card); color:var(--on-video-white); text-align:left;
  transition:transform .18s ease,box-shadow .18s ease;
}
.hg-live__channel:active{ transform:scale(.97); box-shadow:var(--shadow-card-hover); }
.hg-live__channel-tag{
  position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--radius-badge);
  background:var(--badge-gradient); color:var(--on-video-white);
  font-size:11px; font-weight:700; line-height:16px; box-shadow:var(--shadow-badge);
}
.hg-live__channel-tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--on-video-white);
}
.hg-live__channel-name{ font-size:18px; font-weight:700; line-height:24px; }
.hg-live__channel-play{
  position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.24); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.hg-live__channel-play .hg-ico{ width:16px; height:16px; color:var(--on-video-white); }
/* accent 渐变底色（预览视觉；落地不参与接口字段） */
.hg-live__channel--default{ background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-deep)); }
.hg-live__channel--cctv{ background:linear-gradient(135deg,#E53935,#B71C1C); }
.hg-live__channel--sat{ background:linear-gradient(135deg,#7B5CFF,#5B3FD9); }
.hg-live__channel--local{ background:linear-gradient(135deg,#00B8A9,#00897B); }
.hg-live__channel--sport{ background:linear-gradient(135deg,#43A047,#1B5E20); }
.hg-live__channel--kids{ background:linear-gradient(135deg,#FF7AA2,#FF4F81); }

/* ══════════════════════════════════════════════════════════════════════
   分节 X · 设置弹窗（影视源 / 直播源管理：展示内置源 + 自定义源增删）
   ══════════════════════════════════════════════════════════════════════ */
.hg-settings{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); padding:24px; }
.hg-settings[hidden]{ display:none; }
.hg-settings__panel{ width:100%; max-width:460px; max-height:84vh; overflow-y:auto;
  background:var(--bg-page); border-radius:16px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.hg-settings__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--divider); }
.hg-settings__title{ font-size:17px; font-weight:600; color:var(--text-primary); margin:0; }
.hg-settings__close{ width:32px; height:32px; font-size:22px; line-height:1; color:var(--text-secondary); background:transparent; }
.hg-settings__body{ padding:8px 18px 4px; }
.hg-settings__foot{ padding:10px 18px 16px; }
.hg-settings__ver{ font-size:12px; color:var(--text-secondary); }
.hg-settings__sec{ padding:14px 0; border-bottom:1px solid var(--divider); }
.hg-settings__sec:last-child{ border-bottom:0; }
.hg-settings__h3{ font-size:15px; font-weight:600; color:var(--text-primary); margin:0 0 8px; }
.hg-settings__sub{ font-size:12px; color:var(--text-secondary); margin:10px 0 6px; }
.hg-settings__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hg-settings__chip{ display:inline-flex; align-items:center; gap:4px; max-width:100%;
  padding:5px 10px; border-radius:999px; background:var(--bg-card); color:var(--text-primary);
  font-size:13px; border:1px solid var(--divider); }
.hg-settings__chip--ro{ opacity:.78; }
.hg-settings__del{ flex:none; width:18px; height:18px; font-size:14px; line-height:1; color:var(--text-secondary); background:transparent; border-radius:50%; }
.hg-settings__del:hover{ color:#e5484d; }
.hg-settings__empty{ font-size:13px; color:var(--text-secondary); padding:2px 0; }
.hg-settings__add{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.hg-settings__input{ flex:1 1 140px; min-width:0; height:38px; padding:0 12px; border:1px solid var(--divider); border-radius:10px; background:var(--bg-card); font-size:14px; color:var(--text-primary); outline:none; }
.hg-settings__input::placeholder{ color:var(--placeholder); }
.hg-settings__addbtn{ flex:none; height:38px; padding:0 18px; border:0; border-radius:10px; background:var(--brand-orange,#FF7A1A); color:#fff; font-size:14px; font-weight:600; }