* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
/* 禁止长按把封面/图文/视频拖出原生拖拽浮层（-webkit-user-drag 是 WebKit 专属，user-select 拦不住它） */
img, video { -webkit-user-drag:none; }
html,body { height:100%; background:#000; color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  overscroll-behavior:none;
  /* 禁止长按出现文本选中光标/放大镜及图片系统菜单（登录输入框单独放开） */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- 作者列表 ---------- */
/* fixed 全屏 + 内部滚动（同 #meView/#profileView）：window 始终不滚动，
   iOS 左滑返回时首页快照锚定在视口原点，滚动过也不会露黑底 */
#homeView { position:fixed; inset:0; background:#000; }
#homeScroll { position:absolute; inset:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:1200px; margin:0 auto;
  /* 底栏内容高约 45px，48px 刚好避让，不再留多余黑边 */
  padding:0 16px calc(env(safe-area-inset-bottom) + 48px); }
#homeScroll::-webkit-scrollbar { display:none; }
.urow { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:transparent; color:#fff; padding:13px 6px;
  border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; font-size:16px; }
.urow:active { background:rgba(255,255,255,.06); }
.urow .avatar { width:42px; height:42px; flex:none; border-radius:50%;
  background:linear-gradient(135deg,#fe2c55,#7b2cff);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; overflow:hidden; }
.urow .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.urow .uname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-empty { padding:72px 24px; text-align:center;
  color:rgba(255,255,255,.42); font-size:14px; line-height:1.6; }
.urow .ustats { flex:none; display:flex; align-items:center; gap:4px; }
.urow .stat { display:flex; align-items:center; gap:2px; font-size:12px;
  color:rgba(255,255,255,.4); font-variant-numeric:tabular-nums; }
.urow .stat .si { display:flex; align-items:center; }
.urow .stat svg { width:10px; height:10px; display:block; }
.urow .stat.like.on { color:#fe2c55; }
.urow .stat.favorite.on { color:#ffcc33; }
.urow .stat.dislike.on { color:#5b8cff; }
.urow .chev { color:rgba(255,255,255,.35); font-size:24px; }
.urow.all .avatar { background:rgba(255,255,255,.15); }

/* 首页吸顶头部：目录选择已移至「我的」页，这里只剩二级内容 tab */
.home-head { position:sticky; top:0; z-index:3; background:#000; }

/* 首页 tab：用户 / 隐藏用户 / 我的喜欢 / 我的收藏（均基于「我的」里所选目录） */
.h-tabs { display:flex; justify-content:center; gap:24px;
  padding:calc(env(safe-area-inset-top) + 10px) 0 10px; }
.h-tab { font-size:15px; color:rgba(255,255,255,.5); position:relative;
  padding-bottom:6px; cursor:pointer; }
.h-tab.on { color:#fff; font-weight:600; }
.h-tab.on::after { content:''; position:absolute; left:50%; bottom:0;
  width:22px; height:2.5px; border-radius:2px; background:#fff; transform:translateX(-50%); }

/* ---------- 「我的」页：目录（源）管理 ---------- */
#meView { position:fixed; inset:0; background:#000; z-index:10; }
#meScroll { position:absolute; inset:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:1200px; margin:0 auto;
  padding-bottom:calc(env(safe-area-inset-bottom) + 48px); }
#meScroll::-webkit-scrollbar { display:none; }
.me-head { padding:calc(env(safe-area-inset-top) + 12px) 16px 8px;
  font-size:26px; font-weight:700; }
.me-sec { padding:10px 14px 0; }
.me-sec-title { font-size:12.5px; color:rgba(255,255,255,.42);
  padding:4px 4px 9px; }
.me-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; border-radius:12px; margin-bottom:8px;
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  font-size:15.5px; padding:15px 16px; }
.me-row:active { background:rgba(255,255,255,.13); }
.me-row .me-name { flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.me-row .me-check { flex:none; width:20px; text-align:center;
  font-size:16px; font-weight:700; color:#fff; visibility:hidden; }
.me-row.on { background:rgba(255,255,255,.13); }
.me-row.on .me-check { visibility:visible; }
a.me-row { text-decoration:none; }
a.me-row .me-check { visibility:visible; font-size:20px; font-weight:400;
  color:rgba(255,255,255,.5); }
.me-tip { font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.38);
  padding:6px 4px 0; }

/* ---------- 一级底部 Tab：首页 / 我的 ---------- */
#bottomNav { position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:1200px; margin:0 auto; display:flex;
  background:rgba(0,0,0,.96); border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:env(safe-area-inset-bottom); }
.b-tab { flex:1; border:0; background:transparent;
  color:rgba(255,255,255,.5); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:13px 0 12px; font-size:16px; }
.b-tab.on { color:#fff; font-weight:600; }
#homeGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
#homeSentinel { display:flex; align-items:center; justify-content:center;
  height:56px; font-size:13px; color:rgba(255,255,255,.45); }

/* ---------- 信息流 ---------- */
#feedView { position:fixed; inset:0; background:#000; }
/* 从网格卡片进入：播放层从卡片位置放大到全屏（抖音式转场） */
#feedView.feed-zoom-in {
  --zox:50%; --zoy:50%; --zscale:.3;
  transform-origin:var(--zox) var(--zoy);
  animation:feedZoomIn .26s cubic-bezier(.2,.7,.25,1) both;
  will-change:transform, opacity;
}
@keyframes feedZoomIn {
  0%   { transform:scale(var(--zscale)); opacity:.2; }
  60%  { opacity:1; }
  100% { transform:scale(1); opacity:1; will-change:auto; }
}
@media (prefers-reduced-motion: reduce) {
  #feedView.feed-zoom-in { animation:none; }
}
/* 下拉收起进行中：裁圆角、合成层加速；控件随下拉快速淡出，只剩画面在缩 */
#feedView.dismissing { overflow:hidden; will-change:transform; }
#feedView.dismissing #topbar,
#feedView.dismissing .overlay,
#feedView.dismissing #seekBar,
#feedView.dismissing #imgBar,
#feedView.dismissing .pause-ico { opacity:0; transition:opacity .16s ease; }
/* 松手后的回弹 / 落卡：只对形变属性做一次过渡（跟手阶段无过渡，保证严格跟手） */
#feedView.dismiss-anim { transition:transform .25s cubic-bezier(.2,.7,.25,1),
  background-color .25s ease, border-radius .25s ease; }
#feed { height:100%; width:100%; max-width:1200px; margin:0 auto;
  overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; }
#feed::-webkit-scrollbar { display:none; }
.page { position:relative; height:100vh; height:100dvh; scroll-snap-align:start;
  scroll-snap-stop:always; background:#000; overflow:hidden; }
.stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.stage video { width:100%; height:100%; object-fit:contain; background:#000; }

/* 暂停时画面正中的三角形播放图标：不拦截点击（点画面任意处继续播放） */
.pause-ico { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4); }
.pause-ico svg { width:44px; height:44px; color:#fff; }

.imgtrack { position:absolute; inset:0; overflow-x:auto; overflow-y:hidden;
  display:flex; scroll-snap-type:x mandatory; scrollbar-width:none; }
.imgtrack::-webkit-scrollbar { display:none; }
.slide { flex:0 0 100%; height:100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center; }
.slide img { width:100%; height:100%; object-fit:contain; }

/* 图片分段进度条：底部，与视频进度条同一位置（互斥显示） */
#imgBar { position:absolute; left:0; right:0; bottom:env(safe-area-inset-bottom);
  height:20px; z-index:30; max-width:1200px; margin:0 auto;
  padding:0 12px; display:flex; align-items:center;
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; }
#imgDots { flex:1; display:flex; gap:4px; }
#imgDots i { height:3px; flex:1; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden;
  transition:height .12s, border-radius .12s, background .12s; }
#imgDots i.seen, #imgDots i.cur { background:rgba(255,255,255,.9); }
/* 拖拽激活：与视频进度条 #seekBar.show 同款加粗（3px -> 8px），当前段红色高亮 */
#imgBar.show #imgDots i { height:8px; border-radius:4px; }
#imgBar.show #imgDots i.cur { background:#fe2c55; }

.overlay { position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:18px 16px calc(env(safe-area-inset-bottom) + 24px);
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; pointer-events:none; }
.info { min-width:0; }
.author { font-size:17px; font-weight:700; margin-bottom:7px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.author-link { pointer-events:auto; cursor:pointer; -webkit-user-drag:none; }
.author-link:active { opacity:.6; }
.desc { font-size:14.5px; line-height:1.45; word-break:break-word;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
/* 文案折叠：默认最多 3 行，超出显示下拉箭头展开 */
.desc.clamped { display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; overflow:hidden; }
.desc-toggle { pointer-events:auto; display:flex; align-items:center;
  margin:2px 0 0; padding:4px 0; border:0; background:transparent;
  color:rgba(255,255,255,.92); font-size:12px; cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
.desc-toggle svg { width:18px; height:18px; transition:transform .2s ease; }
.desc-toggle.up svg { transform:rotate(180deg); }
.meta { font-size:12px; color:rgba(255,255,255,.66); margin-top:7px; }
.actions { flex:none; display:flex; flex-direction:column; gap:18px; pointer-events:auto; }
.act { text-align:center; font-size:12px; color:#fff; cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.5); user-select:none; }
.act .ico { font-size:30px; line-height:1; display:block; margin-bottom:3px; }
.act .ico svg { width:24px; height:24px; display:block; margin:0 auto; }
.act.liked .ico { color:#fe2c55; animation:pop .3s ease; }
.act.faved .ico { color:#ffcc33; animation:pop .3s ease; }
.act.disliked .ico { color:#5b8cff; animation:pop .3s ease; }
.act.disliked .ico svg { fill:currentColor; }
@keyframes pop { 0%{transform:scale(.6)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }

#topbar { position:absolute; top:env(safe-area-inset-top); left:0; right:0; height:48px;
  display:flex; align-items:center; gap:10px; padding:0 12px; z-index:20;
  color:#fff; pointer-events:none; }
#topbar button, #topbar span { pointer-events:auto; }
#topbar button { width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
#feedTitle { font-size:14px; font-weight:600; max-width:45%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }
#muteBtn { margin-left:auto; }

/* ---------- 底部可拖拽进度条（仅视频） ---------- */
#seekBar { position:absolute; left:0; right:0; bottom:env(safe-area-inset-bottom);
  z-index:30; max-width:1200px; margin:0 auto; padding:0 12px;
  display:flex; flex-direction:column;
  touch-action:none; user-select:none; -webkit-user-select:none; }
/* 数字在进度条正上方居中；右侧操作列更靠外，不会重叠 */
#seekTime { align-self:center; margin-bottom:2px;
  font-size:11px; line-height:1;
  color:rgba(255,255,255,.88); text-shadow:0 0 3px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
#seekTrack { position:relative; height:12px; display:flex; align-items:center;
  cursor:pointer; }
#seekTrack::before { content:''; position:absolute; left:0; right:0; height:3px;
  border-radius:2px; background:rgba(255,255,255,.28); transition:height .12s; }
/* 透明触摸热区：视觉仍是 3px 细线，命中盒扩大到 44px 高并吃掉 seekBar 两侧 12px 留白 */
#seekTrack::after { content:''; position:absolute; left:-12px; right:-12px; top:50%;
  height:44px; transform:translateY(-50%); }
#seekFill { position:absolute; left:0; height:3px; border-radius:2px; background:#fe2c55;
  width:0; transition:height .12s; }
#seekKnob { position:absolute; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow:0 0 5px rgba(0,0,0,.55); transform:translateX(-50%);
  opacity:0; transition:opacity .12s, width .12s, height .12s; pointer-events:none; }
#seekTrack:hover #seekKnob { opacity:1; }
#seekBar.show #seekTrack::before { height:8px; border-radius:4px; }
#seekBar.show #seekFill { height:8px; border-radius:4px; }
#seekBar.show #seekKnob { opacity:1; width:14px; height:14px; }

#sentinel { display:flex; align-items:center; justify-content:center; height:64px;
  font-size:13px; color:rgba(255,255,255,.45); }
.spinner { width:16px; height:16px; margin-right:8px; border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- 用户详情页（仿抖音主页） ---------- */
#profileView { position:fixed; inset:0; background:#000; }
#profileTop { position:absolute; top:env(safe-area-inset-top); left:0; right:0;
  height:48px; display:flex; align-items:center; padding:0 12px; z-index:20;
  pointer-events:none; }   /* 透明浮层不拦截点击，避免吸顶 tab 点不到 */
#profileTop button { width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto; }
#profileBack svg, #backBtn svg { width:24px; height:24px; display:block; }
#profileScroll { position:absolute; inset:0; overflow-y:scroll;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:1200px; margin:0 auto;
  /* 无底部导航，但哨兵「没有更多了」需避让 Home 指示条 */
  padding-bottom:env(safe-area-inset-bottom); }
#profileScroll::-webkit-scrollbar { display:none; }

#profileHead { padding:calc(env(safe-area-inset-top) + 48px) 16px 16px; }
.p-headrow { display:flex; align-items:center; gap:12px; }
.p-avatar { width:72px; height:72px; flex:none; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,#fe2c55,#7b2cff);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:700; }
.p-avatar img { width:100%; height:100%; object-fit:cover; }
.p-nameblock { min-width:0; }
.p-hide-btn { margin-left:auto; flex:none; padding:7px 16px; border-radius:18px;
  border:1px solid rgba(255,255,255,.25); background:transparent;
  color:rgba(255,255,255,.85); font-size:14px; cursor:pointer; transition:all .15s; }
.p-hide-btn.on { background:#fe2c55; border-color:#fe2c55; color:#fff; }
#pName { font-size:21px; font-weight:700; }
#pUid { font-size:13px; color:rgba(255,255,255,.5); margin-top:5px; }
#pSig { font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.85);
  margin-top:14px; white-space:pre-wrap; word-break:break-word; }
.p-stats { display:flex; gap:20px; margin-top:14px;
  font-size:14px; color:rgba(255,255,255,.55); }
.p-stats b { color:#fff; font-weight:600; margin-right:4px; }

.p-tabs { display:flex; justify-content:center; gap:30px;
  padding:10px 0 12px; position:sticky; top:0; z-index:10; background:#000; }
.p-tab { font-size:15px; color:rgba(255,255,255,.5); position:relative; padding-bottom:6px; }
.p-tab.on { color:#fff; font-weight:600; }
.p-tab.on::after { content:''; position:absolute; left:50%; bottom:0;
  width:22px; height:2.5px; border-radius:2px; background:#fff; transform:translateX(-50%); }

#profileGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
@media (min-width:750px) {
  #profileGrid, #homeGrid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1200px) {
  #profileGrid, #homeGrid { grid-template-columns:repeat(5,1fr); }
}
.gcell { position:relative; aspect-ratio:3/4; overflow:hidden; background:#161616;
  border:0; padding:0; cursor:pointer; }
.gcell img.cover { width:100%; height:100%; object-fit:cover; display:block; }
.gcell .gfallback { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; padding:8px; font-size:12.5px; color:rgba(255,255,255,.75);
  text-align:center; background:linear-gradient(135deg,#2b2b2b,#161616);
  overflow:hidden; }
.gcell .gmeta { position:absolute; left:6px; bottom:5px; right:6px;
  display:flex; align-items:center; gap:3px; font-size:16px; color:#fff;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.7); pointer-events:none; font-style:normal; }
.gcell .gmeta .gheart { font-style:normal;font-size: 20px; }   /* <i> 默认 italic 会把 ♡ 字形合成斜体 */
.gcell .gmeta.liked .gheart { color:#fe2c55; }
.gcell .gbadge { position:absolute; top:6px; z-index:2; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.gcell .gimgbadge { right:6px; color:#fff; }
.gcell .gimgbadge svg { width:18px; height:18px; display:block; }
.gcell .gfav { left:6px; font-size:16px; line-height:1; color:#ffcc33; }
#profileSentinel { display:flex; align-items:center; justify-content:center;
  height:56px; font-size:13px; color:rgba(255,255,255,.45); }

/* ---------- 图形登录页 ---------- */
#loginView { position:fixed; inset:0; z-index:50; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 32px calc(env(safe-area-inset-bottom)); }
.login-card { width:100%; max-width:360px; }
.login-logo { font-size:29px; font-weight:700; letter-spacing:1px; text-align:center; }
.login-sub { font-size:13.5px; color:rgba(255,255,255,.5); text-align:center;
  margin:8px 0 30px; }
.field { position:relative; margin-bottom:14px; }
.field input { width:100%; height:48px; border:1px solid rgba(255,255,255,.16);
  border-radius:13px; background:rgba(255,255,255,.07); color:#fff;
  font-size:16px; padding:0 48px 0 16px; outline:none;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
.field input::placeholder { color:rgba(255,255,255,.38); }
.field input:focus { border-color:#fe2c55; background:rgba(255,255,255,.1); }
.eye { position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  font-size:16px; color:rgba(255,255,255,.55); }
#loginBtn { width:100%; height:48px; border:0; border-radius:13px;
  background:#fe2c55; color:#fff; font-size:16px; font-weight:600;
  margin-top:6px; cursor:pointer; }
#loginBtn:disabled { opacity:.6; }
#loginErr { min-height:20px; margin-top:13px; text-align:center;
  font-size:13.5px; color:#ff6a6a; }

/* ===========================================================================
   横屏视频：旋转全屏（仿抖音伪全屏）
   ======================================================================== */
/* 仿抖音「全屏播放」胶囊：贴在横屏画面实际底边下方 8px（top 由 JS 计算），
   仅横屏视频露出；半透明黑底 + 展开图标 + 文案 */
.fs-play-btn { position:absolute; left:50%; top:0; z-index:6;
  transform:translateX(-50%); display:flex; align-items:center; gap:5px;
  padding:7px 15px; border:0; border-radius:20px; cursor:pointer;
  background:rgba(0,0,0,.52); color:#fff; font-size:13.5px; line-height:1;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  white-space:nowrap; }
.fs-play-btn[hidden] { display:none; }
.fs-play-btn svg { width:17px; height:17px; display:block; }
.fs-play-btn:active { background:rgba(0,0,0,.72); }

/* 全屏期间锁住信息流滚动，防止背后误触切视频 */
body.fs-on #feed { overflow:hidden; }

/* 全屏层：纯黑 + 淡入淡出（旋转期间不再叠加位移动画，保证几何稳定） */
#fsLayer { position:fixed; inset:0; z-index:100; background:#000;
  opacity:0; transition:opacity .22s ease; }
#fsLayer.show { opacity:1; }

/* 唯一旋转容器：物理竖屏时宽高互换并顺时针旋转 90°。
   rotate(90) 后局部边 → 物理边的映射：
   local top→right, bottom→left, left→top, right→bottom。
   所有内部 UI 只在局部坐标系正常排版，不做任何反向旋转。 */
.fs-rot { position:absolute; top:50%; left:50%;
  width:100vh; width:100dvh; height:100vw; overflow:hidden;
  transform:translate(-50%,-50%) rotate(90deg);
  --fs-out:env(safe-area-inset-right);    /* 顶栏外侧（local top） */
  --fs-edge:env(safe-area-inset-left);    /* 进度条外侧（local bottom） */
  --fs-a:env(safe-area-inset-top);        /* 横端起点（local left） */
  --fs-b:env(safe-area-inset-bottom); }   /* 横端终点（local right） */

/* 物理视口本身已是横屏（安卓自动旋转 / 桌面）：不旋转直接铺满，
   安全区变量换回正常轴向，避免「物理旋转 + CSS 旋转」双重旋转 */
#fsLayer.fs-natural .fs-rot {
  width:100vw; height:100vh; height:100dvh;
  transform:translate(-50%,-50%) rotate(0);
  --fs-out:env(safe-area-inset-top);
  --fs-edge:env(safe-area-inset-bottom);
  --fs-a:env(safe-area-inset-left);
  --fs-b:env(safe-area-inset-right); }

.fs-stage { position:absolute; inset:0; background:#000;
  display:flex; align-items:center; justify-content:center; }
.fs-stage video { width:100%; height:100%; object-fit:contain; background:#000; }

.fs-pause-ico { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4); }
.fs-pause-ico[hidden] { display:none; }
.fs-pause-ico svg { width:44px; height:44px; color:#fff; }

/* 顶栏：关闭 / 作者名 / 静音，局部坐标系正常排版，随容器整体旋转 */
.fs-top { position:absolute; top:0; left:0; right:0; z-index:6;
  height:calc(48px + var(--fs-out));
  padding:var(--fs-out) var(--fs-b) 0 var(--fs-a);
  display:flex; align-items:center; gap:10px; color:#fff;
  background:linear-gradient(rgba(0,0,0,.5),transparent); }
.fs-icon-btn { flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.fs-icon-btn svg { width:22px; height:22px; display:block; }
.fs-title { flex:1; min-width:0; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* 进度条搬入旋转容器后：取消竖屏 520 限宽，外边距/安全区按局部轴向取值 */
#fsLayer #seekBar { max-width:none; margin:0;
  bottom:calc(var(--fs-edge) + 10px);
  padding-left:calc(12px + var(--fs-a));
  padding-right:calc(12px + var(--fs-b)); }