/* ══════════════════════════════════════════════════════════════════════
   红果短剧 H5 · components.css · 视觉原子 / 底部 Tab 栏
   ────────────────────────────────────────────────────────────────────────
   图标 .hg-ico / 徽章 .hg-badge（含【爆剧】42×20 非对称叶片）/ chip / 选中态 fill:url(#tabGrad) / 4 项等分 Tab 栏。颜色一律走 CSS 变量，SVG 内不写裸 HEX。
   本文件内容与定稿预览稿逐字相同（仅拆文件、不改任何视觉数值）。
   <link> 加载顺序：tokens → base → components → pages → responsive（勿调整，
   顺序即原 <style> 内的层叠顺序，调整会改变覆盖关系并破坏像素一致性）。
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   分节 4 · 图标 / 徽章 / chip 等视觉原子（颜色一律走 CSS 变量，SVG 内不写裸 HEX）
   ══════════════════════════════════════════════════════════════════════ */
.hg-ico{ display:block; width:24px; height:24px; }
.hg-ico svg{ width:100%; height:100%; display:block; }
.hg-ico__fill{ fill:currentColor; }
.hg-ico__glyph{ fill:var(--bg-card); }
.hg-ico__stroke{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hg-ico__dots{ fill:var(--text-primary); }
.hg-badge{
  position:absolute; z-index:3; display:inline-flex; align-items:center; justify-content:center;
}
/* 红色【爆剧】角标：仅剧场页卡片左上角；不旋转；90° 渐变（§6.1） */
.hg-badge--hot{
  top:0; left:0; width:42px; height:20px; border-radius:var(--radius-badge);
  background:var(--badge-gradient); box-shadow:var(--shadow-badge);
  color:var(--on-video-white); font-size:11px; font-weight:700; line-height:20px;
  letter-spacing:0; transform:none;
}
/* 「漫剧」类型小角标（我的页海报右上角，§6.5） */
.hg-badge--type{
  top:6px; right:6px; padding:2px 5px; border-radius:4px;
  background:rgba(0,0,0,.55); color:var(--bg-card);
  font-size:10px; font-weight:400; line-height:14px;
}
/* 海报自带「漫剧」角标时渲染逻辑会跳过该角标（挂 hidden），节点与基准 id 保留。
   必须显式覆盖 .hg-badge 的 display:inline-flex，否则 hidden 属性不生效。 */
.hg-badge--type[hidden]{ display:none; }
.hg-chip--tag{
  display:inline-flex; align-items:center; height:24px; padding:4px 10px;
  border-radius:var(--radius-chip); background:var(--chip-dark-bg);
  color:var(--on-video-white); font-size:12px; font-weight:400; line-height:18px;
}
.hg-chip--rank{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.85));
  color:var(--text-primary); font-size:13px; font-weight:600;
  text-shadow:none;
}
.hg-chip--rank .hg-ico{ width:14px; height:14px; color:var(--bg-card); }
.hg-chip--rank .hg-chev{ width:12px; height:12px; opacity:.55; }
.hg-chip--list{
  display:inline-flex; align-items:center; height:22px; padding:3px 8px;
  border-radius:var(--radius-chip); background:var(--rank-chip-bg);
  color:var(--rank-text); font-size:13px; font-weight:600; line-height:18px;
}
.hg-heat{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; color:var(--on-video-white); }
.hg-heat__num{ font-weight:600; }
.hg-ai-tag--poster{ font-size:11px; font-weight:400; color:rgba(255,255,255,.75); }
.hg-ai-tag--notice{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:400; color:var(--on-video-dim); }
.hg-ai-tag--notice .hg-ico{ width:12px; height:12px; }
.hg-progress-text{ font-size:12px; font-weight:400; line-height:18px; color:var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════════════
   分节 5 · 底部 Tab 栏（4 项等分；首页 #222222 / 剧场·我的 #FAFAFA）
   选中图标为「面性」渐变填充，未选中纯灰；≥1024px 转顶部导航（§9.2）
   ══════════════════════════════════════════════════════════════════════ */
.hg-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:12;
  max-width:var(--app-max-w-mobile); margin:0 auto;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, var(--safe-bottom)));
  padding-bottom:env(safe-area-inset-bottom, var(--safe-bottom));
  grid-template-columns:repeat(4,1fr);
  background:var(--hg-tabbar-bg);
}
.hg-app[data-hg-page="home"]    #home-tabbar,
.hg-app[data-hg-page="theater"] #theater-tabbar,
.hg-app[data-hg-page="mine"]    #mine-tabbar,
.hg-app[data-hg-page="live"]    #live-tabbar{ display:grid; }
.hg-tabbar__item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:var(--tabbar-h); color:var(--tab-inactive);
  transition:transform .18s ease,opacity .18s ease;
}
.hg-tabbar__item:active{ transform:scale(.94); opacity:.85; }
.hg-tabbar__icon{ width:26px; height:26px; fill:var(--tab-inactive); }
.hg-tabbar__item .hg-ico__glyph{ fill:var(--bg-card); }
/* 选中态：面性渐变填充必须同时作用于 <svg> 与其内部 path，
   否则 path 上的 .hg-ico__fill{fill:currentColor} 会覆盖继承值（§11.3 最易错点） */
.hg-tabbar__item.is-active .hg-tabbar__icon,
.hg-tabbar__item.is-active .hg-tabbar__icon .hg-ico__fill{ fill:url(#tabGrad); }
.hg-tabbar__item.is-active .hg-tabbar__icon .hg-ico__glyph{ fill:var(--bg-card); }
.hg-tabbar__label{ font-size:11px; line-height:16px; font-weight:500; color:var(--tab-inactive); }
.hg-tabbar__item.is-active .hg-tabbar__label{ color:var(--tab-active); font-weight:600; }
.hg-home-indicator{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:120px; height:4px; border-radius:2px; background:var(--hg-indicator);
}
.hg-tabbar__item:focus-visible,.hg-page button:focus-visible,.hg-page input:focus-visible{
  outline:2px solid var(--brand-orange); outline-offset:2px;
}