/* ══════════════════════════════════════════════════════════════════════
   红果短剧 H5 · base.css · 基础重置 / 字体栈 / 安全区 / 深浅皮肤
   ────────────────────────────────────────────────────────────────────────
   html/body reset、--font-cn 系统字体栈、body[data-skin="immersive"|"light"] 同页切换变量、env(safe-area-inset-bottom) 与公共状态层。首页 Tab #222222、剧场与我的页 #FAFAFA 由皮肤变量切换，不拆成两个页面。
   本文件内容与定稿预览稿逐字相同（仅拆文件、不改任何视觉数值）。
   <link> 加载顺序：tokens → base → components → pages → responsive（勿调整，
   顺序即原 <style> 内的层叠顺序，调整会改变覆盖关系并破坏像素一致性）。
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   分节 2 · 基础重置与深浅皮肤（body[data-skin] 同页切换，不拆文件）
   ══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-cn); -webkit-font-smoothing:antialiased;
  color:var(--text-primary); background:var(--hg-page-bg);
  overflow-x:hidden;
}
button,input{ font:inherit; color:inherit; }
button{ border:0; background:none; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }
img{ display:block; max-width:100%; }
/* 皮肤语义变量：全部引用 :root，不新增视觉数值 */
body[data-skin="immersive"]{ --hg-tabbar-bg:var(--bg-dark-tabbar); --hg-page-bg:var(--bg-dark-tabbar); --hg-indicator:rgba(255,255,255,.35); }
body[data-skin="light"]{     --hg-tabbar-bg:var(--bg-tabbar);        --hg-page-bg:var(--bg-page);        --hg-indicator:#D1D1D1; }
.hg-num,.hg-stat-num,.hg-heat__num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.hg-app{
  position:relative; max-width:var(--app-max-w-mobile); margin:0 auto;
  min-height:100vh; min-height:100dvh;
}
.hg-page{ min-height:100vh; min-height:100dvh; padding-bottom:var(--tabbar-total); }
.hg-page--home{ padding-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════
   分节 3 · 公共状态层 / 轻反馈 / 安全区（体验规范 §6，全部内联、非弹窗）
   ══════════════════════════════════════════════════════════════════════ */
.hg-status{ position:relative; z-index:9; }
.hg-skeleton,.hg-empty,.hg-error,.hg-guest{
  padding:12px 16px; margin:8px var(--gutter); border-radius:var(--radius-card);
  background:var(--bg-card); font-size:12px; color:var(--text-secondary);
  box-shadow:var(--shadow-card);
}
.hg-error{ color:var(--text-primary); }
.hg-toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-total) + 16px); transform:translate(-50%,8px);
  z-index:20; padding:8px 16px; border-radius:var(--radius-pill);
  background:var(--chip-dark-bg); color:var(--on-video-white); font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease;
}
.hg-toast.is-visible{ opacity:1; transform:translate(-50%,0); }
.hg-safearea{ height:env(safe-area-inset-bottom, var(--safe-bottom)); }