/* ============================================================
 *  PLAZA 直播聚合站 · 样式
 *  唯一视觉依据：../PLAZA设计规范.md（官网 getComputedStyle 实测）+ ../UI设计.md
 *  浅色主题。之前那版暗色是自创的，已作废。
 *
 *  【改本文件必须同步改 index.html 里 app.css?v= 的版本号】
 *  sw.js 对 .css/.js 走 stale-while-revalidate，不换 URL 用户端会拿到旧文件。
 * ============================================================ */

:root{
  /* 颜色 —— 官网实测 */
  --bg:#F7F7F7; --surface:#FFFFFF; --surface-hover:#FAFAFA;
  --line:#F3F4F7; --line-strong:#BFBFBF;

  --red:#FA324C; --red-deep:#F40002;
  /* 红字专用：#FA324C 对白底只有 3.73:1，不达 AA；只在"文字"上换成 #E01033 */
  --red-ink:#E01033; --red-tint:#FFE9EA;

  --ink:#121212; --ink-2:#606266; --ink-3:#666666; --ink-4:#999999;
  --skeleton:#EFEFEF;

  --mask:rgba(0,0,0,.5); --overlay:rgba(0,0,0,.55);
  --stage:#000000; --stage-chrome:#222222;

  --fs-11:11px; --fs-12:12px; --fs-14:14px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --ff:"PingFang SC",Roboto,HelveticaNeue,Helvetica,Arial,sans-serif;

  /* 官网 padding 实采只有这六个值，不要引入第七个 —— 节奏感来自可预测 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s7:28px;

  --r-pill:999px; --r-btn:16px; --r-card:12px; --r-sm:9px; --r-tag:8px; --r-xs:4px;

  --sh-card:0 6px 16px rgba(0,0,0,.08);
  --sh-pop:0 8px 24px rgba(0,0,0,.12);

  --t-fast:120ms; --t-base:200ms; --t-slow:280ms;
  --e-out:cubic-bezier(.2,.8,.2,1); --e-in:cubic-bezier(.4,0,1,1);

  --z-float:800; --z-nav:900; --z-header:999; --z-modal:1000; --z-toast:1100;

  --topbar-h:60px;
  --nav-w:240px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:#000;
  font-family:var(--ff); font-size:var(--fs-14); font-weight:400; line-height:1.5;
  overscroll-behavior-y:none;
}
img{display:block;border:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,li{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0;font-weight:inherit;font-size:inherit}
svg{display:block;fill:currentColor}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:inherit}
html.is-locked{overflow:hidden}

/* ---------- 通用按钮（官网实采规格） ---------- */
.btn{height:32px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s1);border-radius:var(--r-btn);font-size:var(--fs-14);white-space:nowrap;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.btn-primary{background:var(--red);color:#fff;font-weight:700}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{background:transparent;color:#8B8B8B;border:1px solid var(--line-strong)}
.btn-ghost:hover{color:var(--red-ink);border-color:var(--red)}
.btn-text{color:var(--red-ink);font-size:var(--fs-14)}
.pill{border-radius:var(--r-pill)}

/* ============================================================
 * 1. 顶栏
 * ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  height:var(--topbar-h);background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:none;
  padding:0 var(--s6);display:flex;align-items:center;gap:var(--s3);
}
.brand{font-size:var(--fs-24);font-weight:700;color:var(--red);letter-spacing:.5px;
  display:flex;align-items:center;gap:var(--s2)}
.brand .live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* nowrap + 可收缩：不加的话窄屏上"50 个直播中"会竖着折成三行，把 48px 顶栏撑爆 */
.topbar-count{font-size:var(--fs-12);color:var(--ink-4);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.icon-btn{width:32px;height:32px;border-radius:var(--r-sm);display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink-2);transition:background var(--t-fast),color var(--t-fast)}
.icon-btn:hover{background:var(--red-tint);color:var(--red-ink)}
.icon-btn svg{width:20px;height:20px}

/* ============================================================
 * 2. 左导航（≥1500 展开 240 / 1024–1499 图标态 84）
 * ============================================================ */
.sidenav{
  position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:var(--z-nav);
  width:var(--nav-w);background:var(--surface);
  padding:var(--s6) var(--s2) var(--s6) var(--s3);
  overflow-y:auto;overflow-x:hidden;
  transition:width var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.nav-group{margin-bottom:var(--s4)}
.nav-group h4{font-size:var(--fs-12);color:var(--ink-4);padding:0 var(--s3) var(--s2)}
.nav-item{
  height:40px;padding:0 var(--s3);border-radius:var(--r-sm);
  display:flex;align-items:center;gap:var(--s2);width:100%;
  font-size:var(--fs-14);color:#000;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.nav-item svg{width:20px;height:20px;flex:0 0 20px}
.nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--surface-hover)}
.nav-item.active{background:var(--red-tint);color:var(--red)}

/* ============================================================
 * 3. 主内容列
 * ============================================================ */
.main{
  margin-left:calc(var(--nav-w) + var(--s6));
  margin-right:var(--s7);
  padding-top:calc(var(--topbar-h) + var(--s7));
  padding-bottom:var(--s7);
  min-height:100vh;
}

/* 首屏：主推 + 右列 203。官网右列不是全站三栏，只与首屏并排，往下就没有了 */
.hero{display:grid;grid-template-columns:1fr 203px;gap:var(--s3);margin-bottom:var(--s1)}
.hero-main{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:var(--skeleton);display:block}
.hero-main img{width:100%;height:100%;object-fit:cover}
.hero-mask{position:absolute;inset:auto 0 0 0;padding:var(--s4);color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.hero-mask .t{font-size:var(--fs-20);font-weight:700;line-height:28px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-mask .s{font-size:var(--fs-12);opacity:.85;margin-top:var(--s1);
  display:flex;align-items:center;gap:var(--s2)}
.hero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background var(--t-fast) var(--e-out)}
.hero-main:hover .hero-play{background:var(--red)}
.hero-play svg{width:24px;height:24px}
.hero-side{display:grid;gap:var(--s2);align-content:start}
.side-item{position:relative;height:117px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--skeleton);display:block}
.side-item img{width:100%;height:100%;object-fit:cover}
.side-item .t{position:absolute;left:0;right:0;bottom:0;padding:var(--s2);
  font-size:var(--fs-12);color:#fff;line-height:16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 区块标题 ▌—— 官网最有辨识度的细节。竖条 24px 比 20px 文字高，上下各出头 2px，别改成等高 */
.sec-title{position:relative;padding-left:var(--s4);margin:var(--s7) 0 var(--s4);
  display:flex;align-items:center;gap:var(--s3)}
.sec-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:24px;background:var(--red);border-radius:0 4px 4px 0}
.sec-title p{font-size:var(--fs-20);font-weight:700;color:var(--ink);line-height:20px;
  white-space:nowrap}
.sec-title .sec-extra{margin-left:auto;font-size:var(--fs-12);color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- 分类 tab ---------- */
.tabbar{padding-bottom:var(--s4);display:flex;flex-wrap:wrap;align-items:center}
.tab{height:32px;padding:0 var(--s3);margin:0 var(--s2) var(--s2) 0;
  display:inline-flex;align-items:center;gap:var(--s1);
  border-radius:var(--r-btn);font-size:var(--fs-14);font-weight:400;
  background:var(--surface);color:var(--ink-2);
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
/* 官网未选中是透明底，但页面底是 #F7F7F7，透明胶囊在浅灰上没有形。浅色主题下必须给白底 */
.tab:hover{background:var(--red-tint);color:var(--red-ink)}
.tab.active{background:var(--red);color:#fff}
.tab[hidden]{display:none}
.lang{position:relative;margin:0 var(--s2) var(--s2) 0}
.lang-btn{height:32px;padding:0 var(--s3);display:inline-flex;align-items:center;gap:var(--s1);
  border-radius:var(--r-btn);background:var(--surface);color:var(--ink-2);font-size:var(--fs-14)}
.lang-btn svg{width:14px;height:14px}
.lang-menu{position:absolute;left:0;top:36px;z-index:var(--z-float);min-width:112px;
  background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--sh-pop);padding:var(--s1) 0}
.lang-menu[hidden]{display:none}
.lang-menu button{display:block;width:100%;text-align:left;height:32px;padding:0 var(--s3);
  font-size:var(--fs-14);color:var(--ink-2)}
.lang-menu button:hover{background:var(--red-tint);color:var(--red-ink)}
.lang-menu button.on{color:var(--red-ink)}
.tab-note{font-size:var(--fs-12);color:var(--ink-4);padding-bottom:var(--s3)}
.tab-note[hidden]{display:none}

/* ============================================================
 * 4. 卡片网格（官网实测 208×183 / gap 16 12）
 * ============================================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,208px);gap:var(--s4) var(--s3);
  justify-content:space-between}
.card{
  display:block;background:var(--surface);border-radius:var(--r-card);overflow:hidden;
  cursor:pointer;color:inherit;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out);
}
/* 只位移 2px：208 宽的小卡上位移 6px 会让整行看起来在晃 */
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-card)}
.card:hover .cover img{transform:scale(1.04)}
.cover{position:relative;aspect-ratio:16/9;background:var(--skeleton);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--e-out)}
/* 4:3 的 B 站封面若用 contain 会左右露底色，一行里 B 站的卡带"耳朵"——一眼看出来源 */
.cover.is-fallback img{display:none}
.cover.is-fallback::after{content:"";position:absolute;inset:0;background:var(--skeleton)
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23BFBFBF' stroke-width='1.5'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E") center/40px no-repeat}

/* 平台角标：唯一变量是文字。min-width 锁住宽度，否则左上角那条视觉线是抖的 */
.badge-platform{
  position:absolute;top:var(--s2);left:var(--s2);
  min-width:40px;height:20px;padding:0 var(--s2);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-tag);
  font-size:var(--fs-11);font-weight:500;letter-spacing:.2px;line-height:1;color:#fff;
  background:var(--overlay);
  backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);
}
/* 红只属于 PLAZA 自己。用户三屏后会把红学成"这个站的" */
.badge-platform.is-own{background:var(--red);backdrop-filter:none;-webkit-backdrop-filter:none}
.badge-ext{position:absolute;top:var(--s2);right:var(--s2);width:20px;height:20px;
  border-radius:var(--r-tag);display:flex;align-items:center;justify-content:center;
  background:var(--overlay);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.badge-ext svg{width:12px;height:12px}

.cover-bar{position:absolute;left:0;right:0;bottom:0;height:32px;padding:var(--s2);
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-12);color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.cover-bar .lv{display:flex;align-items:center;gap:var(--s1)}
.cover-bar .lv svg{width:16px;height:16px}
.cover-bar .hot{display:flex;align-items:center;gap:var(--s1);font-weight:500}
.cover-bar .hot svg{width:12px;height:12px}
.cover-bar .hot[hidden]{display:none}

.info{padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.info .title{font-size:var(--fs-14);font-weight:500;line-height:22px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .meta{height:24px;display:flex;align-items:center;gap:var(--s2)}
.info .meta .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 24px;
  background:var(--skeleton)}
.info .meta .av-txt{width:24px;height:24px;border-radius:50%;flex:0 0 24px;background:var(--skeleton);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:500;
  color:var(--ink-4);line-height:1}
.info .meta .nick{font-size:var(--fs-14);font-weight:400;color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .meta .cat{height:18px;padding:0 6px;border-radius:var(--r-sm);font-size:var(--fs-12);
  line-height:18px;color:#fff;flex:0 0 auto}
.info .meta .cat[hidden]{display:none}

/* 骨架卡：结构 = 真卡结构，数据到达时布局零位移（CLS=0）。转圈会让整页跳一下 */
.sk-card{background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.sk-card .sk-cover{aspect-ratio:16/9}
.sk-card .sk-info{padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.sk-card .sk-line{height:14px;border-radius:var(--r-xs);margin:4px 0}
.sk-card .sk-meta{height:24px;display:flex;align-items:center;gap:var(--s2)}
.sk-card .sk-av{width:24px;height:24px;border-radius:50%;flex:0 0 24px}
.skeleton{background:var(--skeleton)}
.shimmer{background:linear-gradient(90deg,#EFEFEF 25%,#F7F7F7 37%,#EFEFEF 63%);
  background-size:400% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:100% 50%}to{background-position:0 50%}}

/* 卡片入场：统一一次性淡入。60 张各延迟 30ms 会让最后一张 1.8s 才出现 */
.grid.enter{animation:fade var(--t-base) var(--e-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============================================================
 * 5. 状态：过期 / 离线 / 空 / 失败 / toast
 * ============================================================ */
/* min-height 而不是 height：窄屏上文案会折行，写死 32px 会把"刷新"挤出条外 */
.notice{min-height:32px;padding:var(--s2) var(--s3);margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);line-height:16px;
  background:var(--red-tint);color:var(--red-ink);font-size:var(--fs-12);border-radius:var(--r-sm)}
.notice[hidden]{display:none}
.notice button{margin-left:auto;color:var(--red-ink);font-size:var(--fs-12);
  text-decoration:underline;white-space:nowrap;flex:0 0 auto}

.empty{background:var(--surface);border-radius:var(--r-card);padding:56px var(--s6);
  display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.empty svg{width:120px;height:120px;color:#E4E4E4}
.empty p{font-size:var(--fs-14);color:var(--ink-3)}
.empty[hidden]{display:none}

.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:var(--z-toast);
  max-width:80vw;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  background:rgba(0,0,0,.82);color:#fff;font-size:var(--fs-14);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--e-out)}
.toast.on{opacity:1}

/* ============================================================
 * 6. 右下浮动工具条（官网有，沿用）
 * ============================================================ */
.floatbar{position:fixed;right:var(--s6);bottom:120px;z-index:var(--z-float);
  width:56px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-pop);
  overflow:hidden}
.floatbar button{width:56px;height:56px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:var(--fs-11);color:var(--ink-3);
  transition:color var(--t-fast) var(--e-out)}
.floatbar button svg{width:20px;height:20px}
.floatbar button:hover{color:var(--red-ink)}

/* ============================================================
 * 7. 底部链接区 —— 白卡，不是深色 footer
 *    深色 footer 等于给页面加第二个主题；白卡让它降级成"最后一张卡片"
 * ============================================================ */
.footer{margin-top:var(--s7);padding:var(--s6);background:var(--surface);border-radius:var(--r-card)}
.footer-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.footer h4{font-size:var(--fs-14);font-weight:700;color:var(--ink);margin-bottom:var(--s3)}
.footer a{display:block;font-size:var(--fs-14);color:var(--ink-3);line-height:28px;
  transition:color var(--t-fast) var(--e-out)}
.footer a:hover{color:var(--red-ink)}
.footer a[data-external]::after{content:"↗";font-size:var(--fs-12);margin-left:var(--s1);opacity:.6}
.footer-bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--fs-12);color:var(--ink-4);line-height:20px}

/* ============================================================
 * 8. 播放页外壳 —— 画面是他们的，其余全是我们的
 * ============================================================ */
.overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--mask);
  display:flex;align-items:center;justify-content:center;padding:var(--s6);
  animation:fade var(--t-base) var(--e-out)}
.overlay[hidden]{display:none}
.player{width:100%;max-width:1100px;max-height:100%;background:var(--surface);
  border-radius:var(--r-card);overflow:hidden auto;display:flex;flex-direction:column}

/* 标题栏底色 #222222 = 虎牙 liveshare 自带控制条实测底色。
   一上一下两条同色把画面夹住，接缝直接消失 —— 本设计最划算的一处偷懒 */
.player-bar{flex:0 0 44px;height:44px;background:var(--stage-chrome);color:#fff;
  padding:0 var(--s3);display:flex;align-items:center;gap:var(--s2)}
.player-bar .pb-btn{width:28px;height:28px;border-radius:var(--r-xs);display:flex;
  align-items:center;justify-content:center;color:#fff;opacity:.8}
.player-bar .pb-btn:hover{opacity:1;background:rgba(255,255,255,.12)}
.player-bar .pb-btn svg{width:18px;height:18px}
.player-bar .pb-badge{min-width:40px;height:20px;padding:0 var(--s2);border-radius:var(--r-tag);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-11);font-weight:500;background:rgba(255,255,255,.16);color:#fff}
.player-bar .pb-badge.is-own{background:var(--red)}
.player-bar .pb-title{flex:1;min-width:0;font-size:var(--fs-14);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stage{position:relative;width:100%;background:var(--stage);aspect-ratio:16/9}
/* 虎牙控制条 36px 实测是 position:relative 的布局块，不加高画面会被压扁 */
.stage.is-huya{aspect-ratio:auto;height:0;padding-bottom:calc(56.25% + 36px)}
.stage iframe,.stage video{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:#000}
.stage video{object-fit:contain}
.stage-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);background:#000;color:#fff;text-align:center;padding:var(--s4);
  transition:opacity var(--t-base) var(--e-out)}
.stage-state[hidden]{display:none}
.spin{width:28px;height:28px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--red);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-state .s-tip{font-size:var(--fs-12);color:var(--ink-4)}
.stage-state .s-main{font-size:var(--fs-14);color:#ccc}
.stage-state .s-icon{width:48px;height:48px;color:var(--line-strong)}
.stage-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:center}
/* 慢加载提示条：贴左下但避开虎牙自带 36px 控制条，且离 iframe 边缘 ≥12px
   —— 我们的红元素不能和虎牙控制条里的橙色贴脸并置 */
.stage-hint{position:absolute;left:var(--s3);bottom:48px;z-index:3;
  height:32px;padding:0 var(--s2) 0 var(--s3);border-radius:var(--r-sm);
  display:flex;align-items:center;gap:var(--s3);
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:var(--fs-12);color:#fff;max-width:calc(100% - 24px)}
.stage-hint a,.stage-hint button{font-size:var(--fs-12);color:#fff;text-decoration:underline;
  white-space:nowrap}
.stage-hint .sh-x{text-decoration:none;opacity:.6;padding:0 var(--s1)}
.stage-hint .sh-x:hover{opacity:1}

.player-info{padding:var(--s3) var(--s4);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--s2)}
.player-info .row{display:flex;align-items:center;gap:var(--s2)}
.player-info .av{width:24px;height:24px;border-radius:50%;flex:0 0 24px;object-fit:cover;
  background:var(--skeleton)}
.player-info .nick{font-size:var(--fs-14);color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-info .hot{font-size:var(--fs-12);color:var(--ink-3);display:flex;align-items:center;gap:var(--s1)}
.player-info .hot svg{width:12px;height:12px}
.player-info .sub{font-size:var(--fs-12);color:var(--ink-4);display:flex;align-items:center;gap:var(--s2)}
.player-info .cat{height:18px;padding:0 6px;border-radius:var(--r-sm);font-size:var(--fs-12);
  line-height:18px;color:#fff}
.player-related{padding:0 var(--s4) var(--s4)}
.player-related .sec-title{margin-top:var(--s4)}
.player-related .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* ============================================================
 * 9. 直播墙
 * ============================================================ */
.wall-wrap{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);
  display:flex;flex-direction:column}
.wall-wrap[hidden]{display:none}
.wall-head{flex:0 0 var(--topbar-h);height:var(--topbar-h);background:var(--surface);
  border-bottom:1px solid var(--line);padding:0 var(--s6);display:flex;align-items:center;gap:var(--s2)}
.wall-head .sec-title{margin:0}
.wall-head .spacer{margin-left:auto}
.wall{flex:1;min-height:0;overflow-y:auto;padding:var(--s3);display:grid;gap:var(--s3);
  align-content:start}
.wall[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.wall[data-n="9"]{grid-template-columns:repeat(3,1fr)}
.cell{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#000}
.cell iframe,.cell video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
/* 内描边：格子间只有 12px 间隙，外描边会把相邻格子挤开、整个网格抖一下 */
.cell.is-audio{outline:2px solid var(--red);outline-offset:-2px}
.cell-bar{position:absolute;top:0;left:0;right:0;height:28px;padding:0 var(--s2);
  display:flex;align-items:center;gap:var(--s2);z-index:2;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:var(--fs-12);color:#fff}
.cell-bar .cb-badge{min-width:40px;height:16px;padding:0 6px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-11);
  background:rgba(255,255,255,.18)}
.cell-bar .cb-badge.is-own{background:var(--red)}
.cell-bar .cb-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-bar .cb-x{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#fff}
.cell-bar .cb-x svg{width:12px;height:12px}
.cell-dead{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:1;color:var(--ink-4);font-size:var(--fs-12);background:#000}
.cell-mute{position:absolute;right:var(--s2);bottom:var(--s2);z-index:2;height:20px;padding:0 6px;
  border-radius:var(--r-xs);background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-11);
  display:flex;align-items:center}

/* ============================================================
 * 10. 移动端底 tab（仅 mobile 布局）
 * ============================================================ */
.tabbar-bottom{display:none}

/* ============================================================
 * 11. 断点：1024–1499 图标态左导航
 * ============================================================ */
@media (max-width:1499px){
  html[data-layout="pc"] .sidenav{width:84px;padding:var(--s6) var(--s2)}
  html[data-layout="pc"] .nav-group h4{display:none}
  html[data-layout="pc"] .nav-item{flex-direction:column;gap:2px;height:56px;width:68px;
    margin:0 auto var(--s1);padding:0;justify-content:center;font-size:var(--fs-11)}
  /* 84px 图标态识别成本高，常驻展开又挤掉一列卡片；hover 浮出层是零成本折中 */
  html[data-layout="pc"] .sidenav:hover{width:var(--nav-w);box-shadow:var(--sh-pop);
    padding:var(--s6) var(--s2) var(--s6) var(--s3)}
  html[data-layout="pc"] .sidenav:hover .nav-group h4{display:block}
  html[data-layout="pc"] .sidenav:hover .nav-item{flex-direction:row;gap:var(--s2);height:40px;
    width:100%;margin:0 0 2px;padding:0 var(--s3);justify-content:flex-start;font-size:var(--fs-14)}
  html[data-layout="pc"] .main{margin-left:calc(84px + var(--s6))}
  html[data-layout="pc"] .grid{grid-template-columns:repeat(5,1fr)}
  html[data-layout="pc"] .hero{grid-template-columns:1fr minmax(160px,203px)}
}
@media (max-width:1279px){
  html[data-layout="pc"] .wall-entry{display:none}   /* 直播墙仅 ≥1280 显示 */
}

/* ============================================================
 * 12. 移动布局（官网无移动适配，用同一套 token 自己设计）
 * ============================================================ */
html[data-layout="mobile"]{--topbar-h:48px}
html[data-layout="mobile"] .sidenav,
html[data-layout="mobile"] .floatbar,
html[data-layout="mobile"] .topbar-auth,
html[data-layout="mobile"] .wall-entry,
html[data-layout="mobile"] .hero-side{display:none}
html[data-layout="mobile"] .topbar{position:sticky;padding:0 var(--s3)}
html[data-layout="mobile"] .brand{font-size:var(--fs-18)}
html[data-layout="mobile"] .main{margin:0;padding:var(--s3) var(--s3)
  calc(56px + env(safe-area-inset-bottom) + var(--s6))}
html[data-layout="mobile"] .hero{grid-template-columns:1fr}
html[data-layout="mobile"] .sec-title{margin:var(--s4) 0 var(--s3)}
html[data-layout="mobile"] .sec-title p{font-size:var(--fs-18)}
/* 移动端顶栏和区块标题都没有富余空间，装饰性副文案直接去掉 */
html[data-layout="mobile"] .sec-extra{display:none}
/* 分类条：44px 条里放 32px tab 上下只剩 6px，太挤 —— 这是唯一允许的尺寸偏离 */
html[data-layout="mobile"] .tabbar{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-header) - 1);
  height:44px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:0 0 0 0;margin:0 calc(-1 * var(--s3)) var(--s2);
  background:var(--bg);align-items:center}
html[data-layout="mobile"] .tabbar::-webkit-scrollbar{display:none}
html[data-layout="mobile"] .tabbar > *:first-child{margin-left:var(--s3)}
html[data-layout="mobile"] .tabbar > *:last-child{margin-right:var(--s3)}
html[data-layout="mobile"] .tab{height:28px;border-radius:14px;padding:0 10px;margin:0 var(--s2) 0 0;flex:0 0 auto}
html[data-layout="mobile"] .lang{margin:0 var(--s2) 0 0;flex:0 0 auto}
html[data-layout="mobile"] .lang-btn{height:28px;border-radius:14px;padding:0 10px}
/* 单列一屏只有 1.5 张翻找成本太高；三列封面 <110px 看不清人脸。双列是唯一解 */
html[data-layout="mobile"] .grid{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
html[data-layout="mobile"] .grid > .card:first-child,
html[data-layout="mobile"] .grid > .sk-card:first-child{grid-column:1/-1}
html[data-layout="mobile"] .grid > .card:first-child .title{font-size:var(--fs-16);font-weight:500}
html[data-layout="mobile"] .footer-groups{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
html[data-layout="mobile"] .footer a{line-height:32px}
html[data-layout="mobile"] .overlay{padding:0}
html[data-layout="mobile"] .player{max-width:none;height:100%;border-radius:0}
/* 竖屏滑推荐时画面不丢，是移动直播站的基本盘 */
html[data-layout="mobile"] .player-bar{position:sticky;top:0;z-index:3}
html[data-layout="mobile"] .stage{position:sticky;top:44px;z-index:2}
html[data-layout="mobile"] .player-related .grid{grid-template-columns:repeat(2,1fr)}
html[data-layout="mobile"] .wall{grid-template-columns:1fr!important}
html[data-layout="mobile"] .tabbar-bottom{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);border-top:1px solid var(--line)}
html[data-layout="mobile"] .tabbar-bottom button{flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:var(--fs-11);color:var(--ink-4)}
html[data-layout="mobile"] .tabbar-bottom button svg{width:22px;height:22px}
html[data-layout="mobile"] .tabbar-bottom button.active{color:var(--red)}
/* 播放时收起 PWA 安装条，否则会盖住直播间信息 */
html.is-locked .pwa-bar{display:none!important}

/* ============================================================
 * 13. 无障碍：去掉位移与循环动画，保留颜色变化
 * ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}