/* =========================================================
   代码流 — 精致赛博深色主题
   性能红线：静态渐变/阴影可；禁止常驻 backdrop-filter、大 blur、无限动画
   ========================================================= */
:root {
  /* 背景径向渐变：深松林绿主调（英伦风·高级感配色），取代纯黑（一次性渲染，非每帧） */
  --bg-grad: radial-gradient(130% 100% at 50% 0%, #16203A 0%, #0F1424 48%, #070A14 100%);
  --nav-h: 64px;           /* 60→64，呼吸感更强（借鉴 niulai hubHeader 88px 的留白思路） */
  --text: #F1F5F9;          /* 冷白：赛博青柠主题衬色，比纯白柔和 */
  --text-dim: #94A3B8;       /* 冷灰：次级文字（旧"灰金"注释已随赛博青柠更正） */
  --text-faint: #7C8AA0;     /* 冷灰：更弱次文字（提亮保对比度 ≥4.5:1，UX 2026-09-22） */
  --panel: rgba(15,20,36,0.72);     /* 深蓝黑半透明面板 */
  --panel-solid: #131A2E;    /* 深蓝不透明面板 */
  --border: rgba(255,255,255,0.12);  /* 青柠微透 */
  --border-hi: rgba(255,255,255,0.24);
  --accent: #A3E635;         /* 青柠：主品牌色（按钮/链接/标题点睛） */
  --accent-2: #C6F432;       /* 亮青柠：次品牌/hover 高亮 */
  --accent-soft: rgba(163,230,53,0.12);
  --accent-glow: rgba(163,230,53,0.18);
  --like: #FF2D6F;           /* 品红：高饱和点赞色，给多巴胺爽感（取代暗砖红） */
  --fav: #22D3EE;            /* 青：收藏色，与青柠组成 cyber 三色（青柠+青+品红） */
  --success: #34D399;        /* 沉静绿：成功/关注提示 */
  --info: #60A5FA;           /* 暗藏蓝（绢色系）：信息提示 */
  --radius-lg: 18px;         /* 22→18，更利落（借鉴 niulai platform 8px / harness 2px 的克制） */
  --radius-md: 12px;         /* 14→12 */
  --radius-sm: 8px;          /* 10→8 */
  --font-base: 15px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 动效三档 token（借鉴 niulai --niulai-fast/base/slow）—— 替代散落硬编码 transition-duration */
  --dur-fast: .14s;          /* 按钮点击/微反馈 */
  --dur-base: .22s;          /* 卡片 hover/边框色变 */
  --dur-slow: .46s;          /* 渐入/面板展开 */
  /* ease-expo（借鉴 AAL7 cubic-bezier(.16,1,.3,1)）—— 用于需要"到位感"的入场动画 */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

/* grain 颗粒底（借鉴 niulai hubGrain / AAL7 body::before）—— 纯 CSS noise，无图片依赖 */
/* 仅在 prefers-reduced-motion: no-preference 下生效，避免影响晕动症用户 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0; }
}

/* index-num 编号类（借鉴 AAL7 index-num）—— 档案感序号，可用于作品编号/步骤序号 */
.index-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* label-mono 元数据类（借鉴 AAL7/niulai）—— 技术栈 chip/元数据小字 */
.label-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* display-tight 流式标题（借鉴 AAL7/niulai clamp()）—— 自适应大标题，省 media query */
.display-tight {
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.02em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg-grad);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-base, 15px);
  overflow: hidden;            /* 滑动交给 .feed */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv02" 1;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }   /* 提交中/不可用统一视觉（UX 2026-09-22） */
img { display: block; }

/* ===================== 顶部导航 ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-t));
  padding: calc(var(--safe-t, 0px) + 10px) 20px 0;   /* 摄像头避让：safe-area + 10px 兜底（全局，不依赖断点） */
  display: flex; align-items: center; justify-content: space-between;
  z-index: 40;
  background: linear-gradient(180deg, rgba(15,20,36,0.85) 0%, rgba(15,20,36,0.4) 55%, rgba(15,20,36,0) 100%);
  /* 移除 backdrop-filter：常驻全宽模糊会让老核显在背后 canvas 每帧动画时重复全屏模糊重绘（卡顿主因） */
  pointer-events: none;          /* 仅子元素可点，避免遮挡滑动 */
}
.nav > * { pointer-events: auto; }

.nav-logo {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  flex-shrink: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-logo span {
  /* 渐变文字：紫→蓝，精致感 */
  background: #A3E635;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
  font-weight: 800;
}

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }

.btn-login {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  color: #fff;
  background: #A3E635;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
.btn-login:active { transform: translateY(0); }

.nav-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  object-fit: cover;
  transition: transform .15s ease, border-color .15s ease;
}
.nav-avatar:hover { transform: scale(1.06); border-color: var(--accent); }
.btn-profile {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06); color: #cfd6ff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn-profile:hover { transform: scale(1.06); border-color: var(--accent); background: rgba(255,255,255,0.12); }

/* ===================== 信息流 ===================== */
.feed {
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);   /* 真实可见高度（JS 写入）：修国产浏览器 vh/dvh 偏大导致底部被浏览器框架压住（2026-09-25） */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  touch-action: none;             /* 触摸滑动由 JS 接管（抖音式跟手 + 甩动翻页） */
  overscroll-behavior-y: contain;  /* 触顶/触底不连动背景、不触发原生下拉刷新 */
}
.feed::-webkit-scrollbar { display: none; }   /* WebKit */
/* 拖动中临时关闭 snap / smooth，避免原生滚动打架 */
.feed.is-touching { scroll-snap-type: none; scroll-behavior: auto; }
/* 滚动链隔离：内层滚动容器触顶/触底不连动背景、不触发原生下拉刷新（移动端竖滑体验） */
.detail-scroll, .drawer-body, .notif-list, .dm-list, .dm-messages, .cmt-list, .coll-view-works { overscroll-behavior-y: contain; }

/* 小红书式双列瀑布流模式（viewMode='grid'）：原生滚动、左右两列交替 */
.feed.grid {
  scroll-snap-type: none;
  scroll-behavior: auto;
  touch-action: auto;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
  max-width: 1100px; margin: 0 auto;   /* 桌面端限宽居中，避免两列被拉成扁条（B1） */
  /* v168：底部 = 24 + 70（70 已含 tabbar 让位）。此处不再叠加 --tabbar-h——
     该变量从 v168 起写的是「实测高度」（手机 75px），叠加会凭空多出 75px 空白。 */
  padding: calc(var(--nav-h) + var(--safe-t) + var(--feedbar-h, 54px) + 8px) 10px calc(94px + var(--safe-b, 0px));
}
/* 双列容器：g-cols 占满整行，feed-end 换行占满（C3 已到底反馈） */
.feed.grid .g-cols { flex: 1 1 100%; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.feed.grid .g-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.feed.grid .feed-end { flex: 1 1 100%; text-align: center; color: var(--text-dim); font-size: 12px; padding: 20px 0 6px; opacity: .7; }

/* ===================== 卡片 ===================== */
.card {
  position: relative;
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);   /* 与 .feed 同步：以真实可见高度为准（2026-09-25）；底部扣减在移动断点做 */
  scroll-snap-align: start;
  scroll-snap-stop: normal;   /* 自由滚动 + 轻吸附（抖音式），避免 always 逐张强停生硬、老机卡顿（游玩 #2） */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .42s cubic-bezier(.3,.8,.3,1), filter .42s ease;
}
/* 懒加载占位符：极简 DOM，首屏不创建完整卡片 */
.card-lazy-placeholder {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* 翻页推入预告：激活卡预览区从底部「推入」淡入 */
.card.is-active .preview { animation: cardEnter .5s cubic-bezier(.25,.9,.3,1.05); }
@keyframes cardEnter {
  from { transform: translateY(38px) scale(.985); opacity: .45; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===================== 小红书式双列卡片（grid 模式） ===================== */
.g-card {
  border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* 性能红线（低端核显/软件渲染）：离屏卡片跳过布局+绘制，
     避免一次性画出 30+ 双列卡把渲染线程卡死（「页面未完全加载」根因）。
     contain-intrinsic-size 给离屏卡占位高度，防止滚动跳动。 */
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.g-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); border-top-color: rgba(255,255,255,0.35); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.g-card:active { transform: scale(.97); }
.g-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-cover { position: relative; overflow: hidden; }
/* 底部柔光：提亮封面底部，保证标题在亮色 demo 封面下可读（纯视觉，不吞点击） */
.g-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%); }
/* hover 实时预览层：鼠标停留挂载 demo，移出即卸载（仅桌面鼠标，触屏点卡进详情） */
.g-preview {
  position: absolute; inset: 0; z-index: 5;   /* 提到 g-title(z4) 之上，挂 demo 后不再被标题压住底部（C2） */
  opacity: 1; pointer-events: auto;     /* 预览区整块可点 → 进详情（用户诉求：点预览进不去） */
  overflow: hidden;
  cursor: pointer;
}
/* 预览层内 demo 画布与自定义 iframe 一律不吞点击（pointer-events:none 穿透到 .g-preview → .g-card openDetail）。
   自定义 HTML 的滚动/点击交互移到详情页内完成（grid 预览只负责"点一下进详情"）。 */
.g-preview .detail-demo { pointer-events: none; }
.g-preview iframe { pointer-events: none; }
/* 性能：用径向渐变模拟柔光，去掉 blur 滤镜（blur 在软件渲染下极贵，
   30+ 双列卡同时 blur 会拖垮渲染线程 → 改用零开销的渐变光斑） */
.g-orb { position: absolute; border-radius: 50%; }
.g-orb.a { width: 130px; height: 130px; top: -36px; left: -24px; background: radial-gradient(circle, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.16) 46%, rgba(255,255,255,0) 72%); }
.g-orb.b { width: 96px; height: 96px; bottom: -30px; right: -16px; background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0) 72%); }
.g-title {
  position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 4;
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.g-info { padding: 10px 12px 13px; }
.g-author { font-size: 12.5px; font-weight: 700; color: #e8e9ee; margin-bottom: 6px; }
.g-desc {
  font-size: 13px; color: #c9cbd2; line-height: 1.45; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.g-tag {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.28);
  padding: 2px 8px; border-radius: 999px;
}
/* 2026-09-19 A2/A3：grid 卡作者来源徽章（玩家作品 vs 官方演示样板） */
.g-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; margin-bottom: 5px; letter-spacing: .3px;
}
.g-badge-player { color:#0F1424; background: #A3E635; }
.g-badge-demo   { color:#E2E8F0; background: rgba(123,139,166,0.22); border: 1px solid rgba(123,139,166,0.4); }
.g-stats { font-size: 12px; color: var(--text-dim); }
.g-stats .gs { display: inline-flex; align-items: center; gap: 3px; }
.g-stats .gs + .gs { margin-left: 12px; }
.g-stats svg { width: 13px; height: 13px; display: block; opacity: .82; }   /* 内联 SVG 图标（A1：清 emoji，跨平台一致） */

/* 中央预览区 */
/* 沉浸式：预览区满屏铺满，去掉"海报卡"边框/圆角/暗角，作品即舞台 */
.preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: none;
  box-shadow: none;
  background: transparent;
  isolation: isolate;
  touch-action: manipulation;   /* 移动端：禁双击缩放 + 去 300ms 延迟，双击点赞手势才灵 */
}
/* 沉浸式：上下渐隐 scrim（不再是居中暗角），保证字幕 / 操作可读 */
.preview::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%);
  pointer-events: none;
}
/* 单列滑动：作品画面从「导航 + 标签栏」下方开始。
   用实测 feed-bar 高度（--feedbar-h，由 app.js 在 boot/resize 写入），替代原魔数 104px：
   - 手机端频道 chips 隐藏后 feed-bar 更矮，原 104px 造成大段空隙；
   - 该规则全局生效（不再限于 ≤900px），修复桌面/平板宽度下作品被顶部不透明 feed-bar 遮挡。 */
body.swipe-immersive .card .preview {
  top: calc(var(--nav-h, 60px) + var(--safe-t, 0px) + var(--feedbar-h, 54px) + 6px);
  /* 修复（2026-09-25）：.preview 默认 inset:0 + height:100%，此处只覆盖 top 未去掉 height，
     导致 high=卡高、top 又位移 → 底部溢出到卡外（作品画面被底部截断/压住）。
     改用 top + bottom 拉伸（height:auto），底严格贴卡底，不再超界。 */
  height: auto;
  bottom: 0;
}
.preview-title {
  position: relative; z-index: 2;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 0 24px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  color: #fff;
}
.preview-badge {
  position: absolute; z-index: 3; top: 14px; left: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  padding: 5px 10px; border-radius: 999px;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  animation: badgeIn .42s cubic-bezier(.2, .9, .3, 1);
  transition: opacity .5s ease;
}
.preview-badge.badge-faded { opacity: .32; }
.card:hover .preview-badge { opacity: 1 !important; }
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}
.reduce-motion .preview-badge { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .preview-badge { opacity: 1; animation: none; } }
/* 2026-09-19 封面即入口：左上角已放 preview-badge，类型标签放右上角 */
.preview-kind {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
  backdrop-filter: blur(3px); animation: badgeIn .42s .1s cubic-bezier(.2,.9,.3,1) both;
}
.preview-kind.kind-play { color:#06121c; background: #A3E635; border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.preview-kind.kind-tool { color:#0F1424; background: #22D3EE; border: 1px solid rgba(255,255,255,0.4); }
.preview-kind.kind-app  { color:#F1F5F9; background: rgba(11,16,35,0.66); border: 1px solid #22D3EE; }
.preview-kind.kind-view { color:#E2E8F0; background: rgba(10,14,30,0.55); border: 1px solid rgba(226,232,240,0.3); }
body.swipe-immersive .preview-kind { display: none !important; }
/* 2026-09-19 P0-2 发布即时正反馈：刚发布卡片上的置顶行动条 */
.just-pub-cta {
  position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(6,13,22,0.85); border: 1px solid rgba(163,230,53,0.5);
  color: #F1F5F9; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(4px); box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  animation: badgeIn .32s cubic-bezier(.2,.9,.3,1) both;
}
.just-pub-cta .just-pub-share {
  border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  background: #A3E635; color:#0F1424;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
}
.just-pub-cta .just-pub-share:active { transform: scale(.95); }
/* 漂浮光斑，增强“活”的感觉（占位预览的轻动效） */
.preview-orb {
  position: absolute; border-radius: 50%; filter: blur(40px);
  opacity: 0.55; z-index: 1;
  animation: float 9s ease-in-out infinite;
}
/* 性能：只有当前激活卡片的 orb 才动画 + 模糊；其余卡片静态且无 blur（15 卡 30 个 blur(40px) 会拖垮老核显/QQ 浏览器软件渲染） */
.card:not(.is-active) .preview-orb { animation: none; transform: none; filter: none; opacity: .25; }
.preview-orb.a { width: 240px; height: 240px; top: -40px; left: -30px; background: rgba(163,230,53,0.7); }
.preview-orb.b { width: 200px; height: 200px; bottom: -50px; right: -20px; background: rgba(198,244,50,0.6); animation-delay: -3s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px, -24px) scale(1.12); }
}

/* ===================== 右侧竖排操作按钮 ===================== */
.actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 18%;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  z-index: 10;
}
.action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 56px;
}
.action-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  background: rgba(19,26,46,0.82);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 14px rgba(0,0,0,0.5);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.action-btn svg { width: 26px; height: 26px; }
.action-btn:hover { transform: scale(1.08); background: rgba(19,26,46,0.7); border-color: rgba(255,255,255,0.22); }
.action-btn:active { transform: scale(0.94); }
.action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.action-count { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
/* 点赞/收藏数字跳动（即时反馈） */
.action-count.pop { animation: countPop .34s cubic-bezier(.2,.9,.3,1.3); }
@keyframes countPop { 0% { transform: scale(1); } 42% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* 高亮态 */
.action.is-on .action-btn { box-shadow: 0 0 0 2px currentColor inset, 0 6px 18px rgba(0,0,0,0.4); }
.action.is-on .action-count { color: #fff; }
.action.like.is-on { color: var(--like); }
.action.like.is-on .action-btn { background: rgba(255,45,111,0.20); box-shadow: 0 0 0 2px var(--like) inset, 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,45,111,0.35) inset; }
.action.fav.is-on { color: var(--fav); }
.action.fav.is-on .action-btn { background: rgba(198,244,50,0.18); box-shadow: 0 0 0 2px var(--fav) inset, 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,211,238,0.35) inset; }
.action.like, .action.fav { color: #fff; }

/* ===================== 左下角作品信息 ===================== */
.meta {
  position: absolute;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: calc(26px + var(--safe-b));
  max-width: min(62vw, 520px);
  z-index: 10;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.meta-author { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.meta-avatar { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(163,230,53,0.35); object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,0.45); transition: box-shadow .15s ease; }
.meta-author:hover .meta-avatar { box-shadow: 0 0 0 2px rgba(163,230,53,0.28), 0 2px 12px rgba(0,0,0,0.4); }
.meta-name { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.meta-title { font-size: clamp(18px, 3.2vw, 24px); font-weight: 800; margin-bottom: 8px; line-height: 1.25; letter-spacing: 0.3px; }
.meta-desc {
  font-size: 14px; color: #d6d8dc; line-height: 1.5; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meta-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-tag {
  font-size: 12.5px; font-weight: 600;
  color: #C6F432;
  background: rgba(163,230,53,0.12);
  border: 1px solid rgba(163,230,53,0.28);
  padding: 3px 10px; border-radius: 999px;
  transition: background .15s ease, border-color .15s ease;
}
.meta-tag:hover { background: rgba(163,230,53,0.16); border-color: rgba(163,230,53,0.35); }

/* ===================== 页码指示 ===================== */
.pager {
  position: fixed;
  left: 10px; top: 58%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 30; pointer-events: none;
}
.pager-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: all .25s ease;
}
.pager-dot.is-active {
  background: linear-gradient(180deg, #C6F432, #C6F432);
  height: 18px; border-radius: 4px;
  box-shadow: 0 0 8px rgba(163,230,53,0.5);
}

/* ===================== 登录弹窗 ===================== */
.modal-mask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.modal-mask[hidden] { display: none; }
.modal {
  position: relative;
  width: min(380px, 90vw);
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1b1c24 0%, #14151a 100%);
  border: 1px solid var(--border-hi);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 50px rgba(163,230,53,0.08);
  animation: pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--text-dim); font-size: 16px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.pub-full { right: 52px; }   /* 与关闭按钮并列，避免重叠 */
.modal-logo { font-size: 15px; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.modal-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.modal-sub { font-size: 13.5px; color: var(--text-dim); margin-bottom: 20px; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-input {
  width: 100%; padding: 13px 15px;
  border-radius: 12px; font-size: 15px; color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  outline: none; transition: border-color .15s ease;
}
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-input::placeholder { color: var(--text-faint); }
.btn-primary {
  width: 100%; padding: 13px;
  border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff;
  background: #A3E635;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.modal-tip { min-height: 18px; margin-top: 12px; font-size: 12.5px; color: var(--like); text-align: center; }

/* ===================== 个人中心抽屉 ===================== */
.drawer-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.5);
  animation: fade .2s ease;
}
.drawer-mask[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: min(360px, 92vw);
  background: var(--panel-solid);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-b);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20px + var(--safe-t)) 18px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-user { display: flex; align-items: center; gap: 12px; }
.drawer-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(163,230,53,0.5); box-shadow: 0 0 0 2px rgba(163,230,53,0.16), 0 2px 10px rgba(0,0,0,0.4); object-fit: cover; }
.drawer-name { font-size: 16px; font-weight: 800; }
.drawer-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.drawer-close { width: 40px; height: 40px; border-radius: 50%; color: var(--text-dim); background: rgba(255,255,255,0.06); font-size: 15px; display: flex; align-items: center; justify-content: center; }
.drawer-close:hover { color: #fff; }
.drawer-tabs { display: flex; gap: 6px; padding: 14px 14px 0; }
.drawer-tab {
  flex: 1; padding: 10px 0; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.drawer-tab:hover { background: rgba(255,255,255,0.05); }
.drawer-tab.is-active { color: #fff; background: rgba(163,230,53,0.16); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px; }
.drawer-logout {
  margin: 12px 14px calc(14px + var(--safe-b));
  padding: 13px; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: var(--like);
  background: rgba(255,45,111,0.10);
  border: 1px solid rgba(255,45,111,0.28);
  transition: background .15s ease;
}
.drawer-logout:hover { background: rgba(255,45,111,0.18); }

/* ===== 通知面板（顶部铃铛下拉） ===== */
.notif-mask { position: fixed; inset: 0; z-index: 70; background: transparent; }
.notif-mask[hidden] { display: none; }
.notif-panel {
  position: fixed; top: calc(56px + 8px); right: 12px; z-index: 80;
  width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px);
  background: #131A2E; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5); overflow: hidden;
  display: flex; flex-direction: column;
}
.notif-panel[hidden] { display: none; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.notif-title { font-size: 15px; font-weight: 800; }
.notif-readall {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 5px 10px; border-radius: 999px; background: rgba(163,230,53,0.12);
  transition: background .15s ease;
}
.notif-readall:hover { background: rgba(163,230,53,0.22); }
.notif-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.notif-empty { padding: 34px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 16px; cursor: pointer; position: relative;
  transition: background .15s ease;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.is-unread { background: rgba(163,230,53,0.06); }
.notif-item.is-unread:hover { background: rgba(163,230,53,0.10); }
.notif-ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: rgba(255,255,255,0.07);
}
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.notif-text b { color: #fff; font-weight: 700; }
.notif-time { margin-top: 3px; font-size: 11px; color: var(--text-faint); }
.notif-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--like);
  margin-top: 8px; flex: none;
}
/* 铃铛未读红点 */
.btn-notif { position: relative; }
.notif-badge {
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; color: #fff;
  background: var(--like); box-shadow: 0 0 0 2px #131A2E;
}
.notif-badge[hidden] { display: none; }

/* —— 通知中心精修 —— */
.notif-title { display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px; }
.notif-panel.is-open { animation: panelIn .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* 空态：图标 + 主副两行，更透气 */
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 22px; }
.notif-empty .ne-ico { font-size: 40px; opacity: .92; filter: drop-shadow(0 4px 14px rgba(163,230,53,.35)); }
.notif-empty .ne-1 { font-size: 14px; font-weight: 800; color: var(--text-dim); }
.notif-empty .ne-2 { font-size: 12px; color: var(--text-faint); line-height: 1.5; max-width: 220px; }

/* 通知项：卡片化 + 未读左条 + 悬停微抬 */
.notif-item { border-radius: 14px; margin: 4px 8px; }
.notif-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0; opacity: 0; transition: opacity .2s ease;
}
.notif-item.is-unread::before { opacity: 1; }
.notif-item.is-unread .notif-text b { color: #fff; }
/* 作者彩色头像（首字母 + 按名取色）+ 类型角标 */
.notif-ava {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: var(--c, #A3E635);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .32);
}
.notif-ava .nt {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; background: #1b2030;
  box-shadow: 0 0 0 2px #131A2E, 0 1px 3px rgba(0, 0, 0, .4);
}
/* 头像 / 昵称可点进对方主页 */
.notif-who { cursor: pointer; }
.notif-ava.notif-who { transition: transform .15s ease, box-shadow .15s ease; }
.notif-ava.notif-who:hover {
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 2px rgba(163,230,53,.5);
}
.notif-name.notif-who {
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(163,230,53,.5);
}
.notif-name.notif-who:hover { color: #A3E635; }
.notif-dot { animation: dotPulse 1.8s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .6; }
}
/* 铃铛新通知摆动 + 角标弹出 */
.btn-notif.wiggle { animation: bellWiggle .6s ease; }
@keyframes bellWiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); }
  45% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); }
}
.notif-badge.pop { animation: badgePop .4s cubic-bezier(.2, .9, .3, 1); }
@keyframes badgePop {
  0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); }
}

/* ===== 私信面板 ===== */
.dm-mask { position: fixed; inset: 0; z-index: 70; background: transparent; }
.dm-mask[hidden] { display: none; }
.dm-panel {
  position: fixed; top: calc(56px + 8px); right: 12px; z-index: 80;
  width: min(380px, calc(100vw - 24px)); height: min(72vh, 560px);
  background: #131A2E; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5); overflow: hidden;
  display: flex; flex-direction: column;
}
.dm-panel[hidden] { display: none; }
.dm-panel.is-open { animation: panelIn .22s cubic-bezier(.2, .9, .3, 1); }
.dm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.dm-title { font-size: 15px; font-weight: 800; }
.dm-head-actions { display: flex; align-items: center; gap: 8px; }
.dm-back {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 5px 10px; border-radius: 999px; background: rgba(163,230,53,0.12);
}
.dm-back:hover { background: rgba(163,230,53,0.22); }
.dm-close {
  width: 28px; height: 28px; border-radius: 50%; font-size: 14px; color: var(--text-dim);
  background: rgba(255,255,255,0.06);
}
.dm-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dm-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.dm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 22px; }
.dm-empty .de-ico { font-size: 40px; opacity: .92; filter: drop-shadow(0 4px 14px rgba(163,230,53,.35)); }
.dm-empty .de-1 { font-size: 14px; font-weight: 800; color: var(--text-dim); }
.dm-empty .de-2 { font-size: 12px; color: var(--text-faint); line-height: 1.5; max-width: 220px; white-space: pre-line; }
.dm-item {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px; cursor: pointer;
  position: relative; transition: background .15s ease; border-radius: 14px; margin: 4px 8px;
}
.dm-item:hover { background: rgba(255,255,255,0.04); }
.dm-item.is-unread { background: rgba(163,230,53,0.06); }
.dm-item.is-unread:hover { background: rgba(163,230,53,0.10); }
.dm-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; background: var(--c, #A3E635);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.32);
}
.dm-body { flex: 1; min-width: 0; }
.dm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-name { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-time { font-size: 11px; color: var(--text-faint); flex: none; }
.dm-preview { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 800;
  line-height: 18px; text-align: center; color: #fff; background: var(--like); flex: none;
}
.dm-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dm-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); flex: none;
}
.dm-chat-name { font-size: 14px; font-weight: 700; color: #fff; }
.dm-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dm-loading { text-align: center; color: var(--text-faint); font-size: 13px; padding: 20px; }
.dm-bubble { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.dm-bubble.me { align-self: flex-end; background: linear-gradient(135deg, #A3E635, #34D399); color: #081018; font-weight: 600; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px rgba(163,230,53,.18); }
.dm-bubble.them { align-self: flex-start; background: rgba(255,255,255,0.08); color: #E2E8F0; border: 1px solid rgba(255,255,255,.10); border-bottom-left-radius: 4px; }
.dm-bubble-text { white-space: pre-wrap; }
.dm-bubble-img { display: block; max-width: 200px; max-height: 220px; border-radius: 10px; margin-bottom: 4px; cursor: zoom-in; }
.dm-bubble-time { margin-top: 4px; font-size: 10px; opacity: .6; text-align: right; }
/* 私信待发送图片预览条 */
.dm-img-preview {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; width: 100%;
  background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.35);
  border-radius: 10px; margin-bottom: 2px; flex: none;
}
.dm-img-preview-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.dm-img-preview-x {
  width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55);
  color: #fff; font-size: 10px; cursor: pointer; line-height: 16px; text-align: center; padding: 0;
}
.dm-compose {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 12px;
  border-top: 1px solid var(--border); flex: none;
}
.dm-input {
  flex: 1; resize: none; max-height: 120px; min-height: 38px;
  padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4;
  background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border); font-family: inherit;
}
.dm-input:focus { outline: none; border-color: var(--accent); }
.dm-send {
  flex: none; padding: 0 18px; height: 38px; border-radius: 12px; font-weight: 700; font-size: 13.5px;
  color: #081018; background: linear-gradient(135deg, #A3E635, #34D399); border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(163,230,53,.22); transition: transform .15s ease, box-shadow .15s ease;
}
.dm-send:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(163,230,53,.3); }
.dm-send:active { transform: scale(.96); }
/* 2026-09-24: 私信一键分享作品 —— 气泡内作品卡片 + 选择弹窗 */
.dm-work-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.28);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.dm-work-card:hover { background: rgba(163,230,53,0.14); border-color: rgba(163,230,53,0.45); }
.dm-work-card-title { font-size: 13px; font-weight: 800; color: #fff; }
.dm-work-card-sub { font-size: 11.5px; color: var(--text-dim); }
.dm-share-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22) !important; }
.dm-share-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text-faint); }
.dm-share-name { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-share-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
/* 顶栏私信按钮 + 角标 */
.btn-dm { position: relative; }
.dm-badge {
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; color: #fff; background: var(--like);
  box-shadow: 0 0 0 2px #131A2E;
}
.dm-badge[hidden] { display: none; }
.btn-dm.wiggle { animation: bellWiggle .6s ease; }
.dm-badge.pop { animation: badgePop .4s cubic-bezier(.2, .9, .3, 1); }

/* ===== 详情页 ⋯ 菜单（举报 / 拉黑） ===== */
.detail-head { position: relative; }
.detail-more {
  width: 34px; height: 34px; border-radius: 50%; font-size: 18px;
  color: var(--text-dim); background: rgba(255,255,255,0.06);
  transition: background .15s ease, color .15s ease;
}
.detail-more:hover { color: #fff; background: rgba(255,255,255,0.12); }
.detail-menu {
  position: absolute; top: 40px; right: 0; z-index: 30;
  background: #1b1f2e; border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; min-width: 150px; box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.detail-menu[hidden] { display: none; }
.detail-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); transition: background .15s ease, color .15s ease;
}
.detail-menu button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.detail-menu button[data-act="block"] { color: var(--like); }
.detail-menu button[data-act="block"]:hover { background: rgba(255,45,111,0.12); }

/* ===== 举报弹窗 ===== */
.modal-report { max-width: 380px; }
.modal-report .modal-input[type="text"], .modal-report select.modal-input {
  appearance: none; -webkit-appearance: none;
  background: var(--bg); color: #fff;
}

/* 抽屉内列表项 */
.dlist-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.dlist-item:hover { background: rgba(255,255,255,0.05); border-color: var(--border); }
.dlist-thumb {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.dlist-info { min-width: 0; }
.dlist-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlist-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.dlist-empty { text-align: center; color: var(--text-faint); font-size: 13.5px; padding: 40px 10px; }

/* 设置项 */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px; border-radius: 12px;
  border: 1px solid var(--border); margin-bottom: 10px;
}
.setting-row .sr-label { font-size: 14px; font-weight: 600; }
.setting-row .sr-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.switch { width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.14); position: relative; transition: background .2s ease; flex-shrink: 0; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition: transform .2s ease; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
.setting-btn { flex-shrink: 0; margin-left: 12px; padding: 7px 16px; font-size: 13px; }
.setting-btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-danger {
  background: rgba(255,45,111,0.12); color: #ff7c95;
  border: 1px solid rgba(255,45,111,0.4);
}
.btn-danger:hover { background: rgba(255,45,111,0.22); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* ===== 设置页（四板块）===== */
.set-hero {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin-bottom: 6px; padding: 18px 16px; border-radius: var(--radius-md);
  background:
    radial-gradient(130% 150% at 0% 0%, var(--accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--border); overflow: hidden;
}
.set-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); pointer-events: none; }
.set-hero-av { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 6px 18px var(--accent-glow); border: 2px solid rgba(255,255,255,0.18); }
.set-hero-info { flex: 1; min-width: 0; }
.set-hero-name { font-size: 17px; font-weight: 800; }
.set-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-hero-edit { flex-shrink: 0; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-hi); color: var(--text); font-size: 13px; font-weight: 650; background: var(--surface-2, rgba(255,255,255,0.06)); cursor: pointer; }
.set-hero-edit:hover { border-color: var(--accent); color: var(--accent); }
.set-group-title { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-dim); margin: 20px 4px 8px; text-transform: none; padding-left: 11px; }
.set-group-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 13px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.set-group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); animation: setRise .32s var(--ease) both; }
.set-group:hover { border-color: var(--border-hi); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.set-group + .set-group { margin-top: 10px; }
.set-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: default; }
.set-row2 + .set-row2 { border-top: 1px solid var(--border); }
.set-row2[role="button"] { cursor: pointer; }
.set-row2[role="button"]:hover { background: rgba(163,230,53,0.07); }
.set-row2[role="button"]:active { background: rgba(163,230,53,0.11); }
.set-row2[role="button"]:focus-visible { background: rgba(163,230,53,0.07); outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.set-row2-tx { min-width: 0; flex: 1; }
.set-row2-l { font-size: 14px; font-weight: 600; }
.set-row2-d { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.set-chev { color: var(--text-dim); font-size: 20px; line-height: 1; flex-shrink: 0; }
.set-row2-inline { flex-wrap: wrap; }
.set-inline { display: flex; gap: 6px; align-items: center; width: 100%; margin-top: 10px; }
.set-inline .modal-input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px; }
/* 2026-09-19 邀请裂变：邀请链接展示框 */
.inv-link {
  margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.25);
  color: var(--text); font-size: 12.5px; font-family: Consolas, Menlo, monospace;
  word-break: break-all; user-select: all;
}
.set-row-btn { flex-shrink: 0; padding: 7px 16px; font-size: 13px; font-weight: 650; border-radius: 999px; cursor: pointer; }
.set-row-btn:disabled { opacity: .45; cursor: not-allowed; }
.set-noti-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff;
  background: var(--like); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.set-noti-count[hidden] { display: none; }
.set-row-btn.has-count { background: rgba(255,45,111,.14); color: #ff7d95; }
.set-swatches { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0 2px; width: 100%; margin-top: 8px; }
.set-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease; }
.set-swatch:hover { transform: scale(1.08); }
.set-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 4px 14px var(--accent-glow); }
.set-slider { flex-wrap: wrap; }
.set-slider-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.set-slider-val { font-size: 12px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.set-range { width: 100%; margin-top: 10px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--p,50%), rgba(255,255,255,0.16) var(--p,50%)); outline: none; }
.set-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 2px 8px var(--accent-glow); }
.set-range::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }
.seg-mini { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.seg-mini button { padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--text-dim); cursor: pointer; }
.seg-mini button.on { background: var(--accent); color: #fff; }
.seg-mini button:active { transform: scale(.96); }

/* 设置页分组入场动画 + 焦点增强 */
@keyframes setRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible,
.set-row-btn:focus-visible, .modal-close:focus-visible, .seg-mini button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-primary:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(163,230,53,0.18); }

/* 改密码：实时密码强度条 */
.pw-strength { display: flex; gap: 6px; margin-top: 2px; }
.pw-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); transition: background .2s var(--ease); }
.pw-strength-label { font-size: 12px; margin-top: 6px; min-height: 15px; color: var(--text-dim); }
.pw-bar.s1 { background: #FF2D6F; } .pw-bar.s2 { background: #C6F432; } .pw-bar.s3 { background: #C6F432; } .pw-bar.s4 { background: #34D399; }
.pw-strength-label.s1 { color: #FF2D6F; } .pw-strength-label.s2 { color: #C6F432; } .pw-strength-label.s3 { color: #C6F432; } .pw-strength-label.s4 { color: #34D399; }
body.light .pw-bar { background: rgba(19,26,46,0.12); }

/* ===== 浅色主题（设置「浅色模式」切换）===== */
body.light {
  --bg: #f4f5fa;
  --bg-grad: radial-gradient(130% 100% at 50% 0%, #ffffff 0%, #eef0f6 50%, #e6e8f0 100%);
  --text: #1a1b22;
  --text-dim: #6b7180;
  --text-faint: #9aa0ac;
  --panel: rgba(255,255,255,0.86);
  --panel-solid: #ffffff;
  --border: rgba(19,26,46,0.10);
  --border-hi: rgba(19,26,46,0.18);
  color-scheme: light;
}
body.light .nav { background: linear-gradient(180deg, rgba(244,245,250,0.92) 0%, rgba(244,245,250,0.5) 55%, rgba(244,245,250,0) 100%); }
body.light .nav-logo { text-shadow: none; }
body.light .nav-logo span { -webkit-text-fill-color: var(--accent); }
body.light .set-swatch.active { border-color: var(--text); }
body.light .set-range { background: linear-gradient(to right, var(--accent) var(--p,50%), rgba(19,26,46,0.14) var(--p,50%)); }

/* 密度：紧凑模式收紧卡片间距 */
body.density-compact .card { padding-bottom: 8px; }
body.density-compact .card-body { padding: 12px 18px 14px; }
body.density-cozy .card-body { padding: 16px 20px 18px; }

/* ===== 分享弹窗（二维码 + 链接） ===== */
.modal-share { max-width: 360px; text-align: center; }
.share-qr-wrap { display: flex; justify-content: center; margin: 8px 0 14px; }
.share-qr {
  background: #fff; border-radius: 14px; padding: 12px; line-height: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.share-qr svg { display: block; width: 192px; height: 192px; }
.share-url {
  font-size: 12.5px; color: var(--text-dim); word-break: break-all;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 14px;
}
.share-actions { display: flex; gap: 10px; }
.share-actions .btn-primary, .share-actions .btn-ghost { flex: 1; }

/* ===== 创建快捷方式弹窗（闪应用安装到主屏） ===== */
.install-url {
  font-size: 12.5px; color: var(--text-dim); word-break: break-all;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 12px;
}
.install-guide {
  font-size: 13px; line-height: 1.7; color: var(--text-dim);
  text-align: left; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.install-guide ol { margin: 6px 0 0; padding-left: 20px; }
.install-guide li { margin: 4px 0; }
.install-guide .kbd {
  display: inline-block; padding: 1px 7px; margin: 0 2px;
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; background: rgba(255,255,255,0.07);
  font-size: 12px; font-family: inherit;
}

/* ===== 信息流骨架屏 ===== */
.card-skeleton {
  height: 100dvh;
  height: var(--vvh, 100dvh);
  flex-shrink: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 0 24px 18vh;
}
.sk-preview { width: min(320px, 68vw); aspect-ratio: 9 / 16; border-radius: 18px; }
.sk-meta { width: min(320px, 68vw); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.sk-line { height: 12px; border-radius: 6px; }
.sk-avatar { width: 40px; height: 40px; border-radius: 50%; }
.sk-name { width: 130px; }
.sk-title { width: 80%; height: 16px; }
.sk-actions { display: flex; gap: 28px; margin-top: 4px; }
.sk-dot { width: 38px; height: 38px; border-radius: 50%; }
.sk-preview, .sk-line, .sk-dot {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.05) 70%);
  background-size: 200% 100%;
  animation: skShimmer 1.2s ease-in-out infinite;
}
@keyframes skShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-preview, .sk-line, .sk-dot { animation: none; }
}

/* ===================== Toast ===================== */
.toast-wrap {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  z-index: 260; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
/* 安卓下载卡常驻时把 toast 上移，避免被盖（UX 2026-09-22） */
@media (max-width: 900px) {
  body.app-install-show .toast-wrap, body:has(.app-install:not([hidden])) .toast-wrap { bottom: 150px; }
}
/* 示例模式提示条：数据源超时回退内置 demo 时显示（UX 2026-09-22） */
.demo-bar {
  position: fixed; top: calc(var(--nav-h, 64px) + var(--safe-t, 0px) + 6px); left: 50%; transform: translateX(-50%);
  z-index: 210; max-width: min(92vw, 560px);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 176, 32, .92); color: #241500; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  pointer-events: none; text-align: center;
  animation: fade .25s ease;
}
.toast {
  padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, rgba(19,26,46,0.96), rgba(20,20,26,0.96));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    0 0 24px rgba(163,230,53,0.10);
  animation: toastIn .25s ease, toastOut .25s ease 1.85s forwards;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ===================== 响应式（窄屏操作区微调） ===================== */
@media (max-width: 560px) {
  .actions { bottom: 14%; gap: 18px; }
  .action { width: 50px; }
  .action-btn { width: 46px; height: 46px; font-size: 21px; }
  .meta { max-width: 74vw; }
}

/* 设置项“减少动效”（手动开关，等价于 prefers-reduced-motion） */
body.reduce-motion .feed { scroll-behavior: auto; }
body.reduce-motion .preview-orb { animation: none; }
body.reduce-motion .action-btn { transition: none; }
body.reduce-motion .card { transition: none; transform: none; filter: none; }
body.reduce-motion * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

/* 预览区交互边界：
   - 内置 demo：激活即可点（按钮等），但浏览态不吞滑动；
   - 自定义 iframe：仅「游玩态」(is-playing) 才接管指针，浏览态 pointer-events:none
     让滑动/滚轮穿透到 feed 翻页，彻底解决「想玩玩不了、想刷刷不走」。 */
.card.is-active .preview-demo { pointer-events: auto; }
.card:not(.is-active) .preview-demo { pointer-events: none; }
.card.is-playing .custom-frame { pointer-events: auto; }
.card:not(.is-playing) .custom-frame { pointer-events: none; }
/* 上传的长页面在游玩态内能原生触摸纵向滚动：自定义作品游玩时把 .feed 的 touch-action:none
   放开为 auto（否则祖先 none 会阻断 iframe 内滚动）；翻页仍只走两侧导航槽（JS 接管 preventDefault），互不冲突 */
body.playing-custom .feed { touch-action: auto; }
.preview { cursor: default; }

/* ===== 游玩态控件 ===== */
.preview-play {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  z-index: 6; pointer-events: auto;
  display: none; align-items: center; gap: 6px;
  background: rgba(163,230,53,0.92); color: #0F1424;
  border: none; border-radius: 999px; padding: 9px 20px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.card.is-active .preview-play { display: flex; }
.card.is-playing .preview-play { display: none; }
.preview-play:hover { background: #C6F432; }
.preview-play:active { transform: translateX(-50%) scale(.93); }
.preview-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.play-exit {
  position: absolute; left: 16px; top: calc(var(--safe-t) + 14px);
  z-index: 7; pointer-events: auto; display: none;
  background: rgba(15,20,36,0.72); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
/* v168：卡内「退出操作」与全局「退出游玩」FAB 完全同义（都走 exitPlay），同屏并排出现 →
   统一由 play-exit-fab 承载（它在 iframe 之外、z-index 更高，脱困更可靠），卡内这颗下线。 */
.card.is-playing .play-exit { display: none; }
.play-exit:hover { background: rgba(15,20,36,0.9); }
.play-exit:active { transform: scale(.94); }

.play-dpad {
  position: absolute; right: 16px; bottom: 80px; z-index: 7; pointer-events: none;
  display: none; grid-template-columns: 52px 52px 52px; grid-template-rows: 52px 52px 52px;
  gap: 5px;
}
.card.is-playing .play-dpad { display: grid; }
.dpad-btn {
  pointer-events: auto;
  background: rgba(15,20,36,0.62); color: #e6ecff;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: transform .1s ease, background .12s ease;
}
.dpad-btn:active { background: rgba(163,230,53,0.5); transform: scale(.9); }
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }

.play-hint {
  position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%);
  z-index: 6; pointer-events: none; display: none;
  background: rgba(15,20,36,0.6); color: #cdd6ff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; white-space: nowrap;
  transition: opacity .5s ease;
}
.card.is-playing .play-hint { display: block; }
/* v168：提示条 6s 后自动淡出（JS 加 .is-gone）——此前常驻横在作品画面上，压住画面文字 */
.card.is-playing .play-hint.is-gone { opacity: 0; }

/* ===================== 沉浸式导航（化解「操作 vs 翻页」冲突） ===================== */
/* 左右导航槽：仅在操作态（.is-playing）激活接管翻页手势，避免抢走作品的操作 */
.nav-gutter {
  position: absolute; top: 0; bottom: 0; width: 13%;
  z-index: 8; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.nav-gutter.left { left: 0; }
.nav-gutter.right { right: 0; }
.card.is-playing .nav-gutter { pointer-events: auto; cursor: ns-resize; }
.nav-gutter .gutter-arrow {
  font-size: 24px; color: rgba(255,255,255,0.72); opacity: 0;
  transition: opacity .2s ease; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.card.is-playing .nav-gutter .gutter-arrow { opacity: .85; }

/* 浮层翻页按钮：桌鼠主翻页手段；操作态下也是手机的主要翻页方式（画面区已让给作品） */
.feed-nav-btn {
  position: fixed; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: #fff;
  background: rgba(19,26,46,0.72); border: 1px solid rgba(255,255,255,0.20); cursor: pointer;
  transition: transform .12s ease, background .15s ease, opacity .25s ease;
}
body.swipe-immersive .feed-nav-btn { display: flex; }
.feed-nav-btn:hover { background: rgba(19,26,46,0.8); }
.feed-nav-btn:active { transform: scale(.9); }
.feed-nav-prev { left: 14px; top: 34%; transform: translateY(-50%); }
.feed-nav-next { right: 14px; bottom: 24px; }
/* 详情/评论侧滑打开时隐藏翻页按钮，避免遮挡 */
.detail-mask:not([hidden]) ~ .feed-nav-btn,
.detail-mask:not([hidden]) + .feed-nav-btn,
body:has(.detail-mask:not([hidden])) .feed-nav-btn,
body:has(.cmt-sheet:not([hidden])) .feed-nav-btn { display: none !important; }

/* 首次进入可操作作品的引导提示 */
.play-coach {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  z-index: 7; pointer-events: none; opacity: 0;
  background: rgba(15,20,36,0.66); color: #eaf0ff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; white-space: nowrap;
  transition: opacity .3s ease;
}
.card.is-active:not(.is-playing) .play-coach { opacity: 1; animation: coachPulse 2.4s ease-in-out infinite; }
@keyframes coachPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* 沉浸模式：导航栏 / feed-bar 半透明，把舞台让给作品 */
body.swipe-immersive .nav { background: rgba(7,10,20,0.32); border-bottom-color: transparent; }
body.swipe-immersive .feed-bar { background: rgba(7,10,20,0.32); }
body.swipe-immersive .nav:hover, body.swipe-immersive .feed-bar:hover,
body.swipe-immersive .nav:focus-within, body.swipe-immersive .feed-bar:focus-within { background: rgba(7,10,20,0.6); }
/* 沉浸模式：左缘进度点隐藏，meta 贴底 —— 纯 TikTok 感
   ⚠️ tabbar 的隐藏不在这里（v125 起移到 min-width:901px 断点）：
   此前这条无条件 !important 与 900px 断点的 body.swipe-immersive .tabbar{flex!important}
   特异性/优先级完全相同，纯靠源码顺序压住，任何人在文件更前面新增同选择器规则都会让
   手机端导航静默消失。改成桌面断点后，手机端级联里只剩一条候选，不再依赖顺序。 */
body.swipe-immersive { padding-bottom: 0; }
body.swipe-immersive .pager { display: none; }
body.swipe-immersive .meta { bottom: calc(14px + var(--safe-b)); max-width: min(84vw, 460px); }
/* 沉浸模式：把舞台完全让给画布 —— 卡片内描述/标签/教练提示/位置计数/预览徽章全部隐藏，默认只留作者+标题，互动按钮紧凑 */
body.swipe-immersive .meta-desc, body.swipe-immersive .meta-tags, body.swipe-immersive .play-coach, body.swipe-immersive #feedPos, body.swipe-immersive .preview-badge { display: none !important; }
/* v168：窄屏实测 .meta 被作者行撑成 ~130px 宽 → 标题的 78% 只剩 101px，
   「贪吃蛇：经典小游戏」被硬断成「贪吃蛇：经典小 / 游戏」。放宽 meta 到 84vw（右侧仍留出操作栏），
   标题吃满可用宽度；同时把「▶ 体验」按钮上移 34px，让出标题区（原先它正压在标题行上）。 */
body.swipe-immersive .meta-title { max-width: 100%; }
body.swipe-immersive .preview-play { bottom: calc(120px + var(--safe-b, 0px)); }
/* 沉浸模式 + 小屏（≤480px）：右侧 7 颗按钮紧凑化，把画布横向空间还给作品 */
@media (max-width: 480px) {
  body.swipe-immersive .actions { right: 6px; bottom: 12%; gap: 10px; }
  body.swipe-immersive .action { width: 36px; gap: 2px; }
  body.swipe-immersive .action-btn { width: 34px; height: 34px; }
  body.swipe-immersive .action-btn svg { width: 17px; height: 17px; }
  body.swipe-immersive .action-count { font-size: 10px; }
  /* feed-bar 第二行换一批/刷新 在小屏只显图标，不挤文字 */
  body.swipe-immersive .feed-bar-row .shuffle-btn span { display: none; }
  body.swipe-immersive .feed-bar-row .shuffle-btn { padding: 4px 8px; }
}
/* 小屏通用：drawer 里设置项标签被压成竖排 → 允许换行 + 文字 min-width */
@media (max-width: 480px) {
  .set-row2 { flex-wrap: wrap; padding: 12px 12px; gap: 8px; }
  .set-row2-tx { flex: 1 1 60%; min-width: 60%; }
  .set-row2-l { white-space: normal; }
  /* 抽屉顶部 6 个 tab 太多小屏换行 */
  #drawer .drow { flex-wrap: wrap; }
  #drawer .dtab { padding: 8px 10px; font-size: 13px; }
}


/* ===== 作品详情页 ===== */
.detail-mask {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.detail-mask[hidden] { display: none; }
.detail {
  position: fixed; inset: 0; z-index: 59;
  background: #0a0a0d; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.3,.8,.3,1);
}
.detail[hidden] { display: block; transform: translateY(100%); pointer-events: none; }
.detail:not([hidden]) { transform: translateY(0); }
.detail-close {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-size: 16px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
}
.detail-close:hover { background: rgba(255,255,255,0.2); }
/* 详情页内切换上一/下一作品（v127）：不退出详情直接连续浏览，
   左右各一个与关闭按钮同高的小圆钮，键盘 ←/→ 同步触发。 */
.detail-nav {
  position: fixed; top: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08); cursor: pointer;
  padding: 0; transition: background var(--dur-fast, .14s) ease, opacity var(--dur-fast, .14s) ease;
}
.detail-nav-prev { left: 14px; }
.detail-nav-next { right: 60px; }
.detail-nav:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.detail-nav:disabled { opacity: 0.28; cursor: not-allowed; }
.detail-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail-scroll { max-width: 760px; width: 100%; margin: 0 auto; padding: 56px 18px calc(40px + var(--safe-b)); }
.detail-preview {
  width: 100%; height: clamp(200px, 34vh, 360px); border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  touch-action: manipulation;
}
.detail-preview::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.5) 100%); pointer-events: none; }   /* 装饰层不拦截，否则 demo 内的按钮（如番茄钟"开始/暂停"）点不到 */
/* 游戏类（内置蛇 / 粘贴自定义）：给接近方形的更高容器，避免棋盘被压扁或被裁 */
.detail-preview.is-game { height: clamp(320px, 58vh, 580px); }
.detail-preview.is-game::after { background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.35) 100%); }
/* custom-fit（JS 按内容实际高度撑开，上限 78vh）：工具类长页面作品完整展示，超高内部滚动兜底 */
.detail-preview.custom-fit { transition: height .3s ease; }
.detail-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.detail-author-av { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); }
.detail-author-name { font-size: 15px; font-weight: 700; }
.detail-title { font-size: clamp(20px, 4vw, 30px); font-weight: 800; margin-bottom: 10px; }
.detail-desc { font-size: 14px; color: #d6d8dc; line-height: 1.6; margin-bottom: 14px; }
.detail-tags { margin-bottom: 22px; }
.detail-actions {
  display: flex; gap: 24px; padding: 16px 0 22px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.detail-action { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.detail-action .action-count { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.detail-action.is-on .action-count { color: #fff; }
.detail-action.like.is-on { color: var(--like); }
.detail-action.like.is-on .action-btn { background: rgba(255,45,111,0.20); box-shadow: 0 0 0 2px var(--like) inset, 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,45,111,0.35) inset; }
.detail-action.fav.is-on { color: var(--fav); }
.detail-action.fav.is-on .action-btn { background: rgba(198,244,50,0.18); box-shadow: 0 0 0 2px var(--fav) inset, 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,211,238,0.35) inset; }
.detail-action .action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.detail-section { margin-bottom: 22px; }
.detail-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.detail-placeholder {
  font-size: 13.5px; color: var(--text-faint);
  padding: 18px; border: 1px dashed var(--border); border-radius: 12px; text-align: center;
}

/* ===== 加载 / 错误 / 空数据三态 ===== */
.feed-state {
  height: 100vh; height: 100dvh; height: var(--vvh, 100dvh);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 15px; text-align: center; padding: 20px;
}
.feed-state.error { color: var(--like); }

/* ===== 点赞 / 收藏粒子动效 ===== */
.burst {
  position: fixed; z-index: 90; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; transform: translate(-50%, -50%);
  animation: burstOut .7s ease-out forwards;
}
@keyframes burstOut {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* ===== 到头 / 到尾弹性反馈 ===== */
.card.bounce-up { animation: bounceUp .4s ease; }
.card.bounce-down { animation: bounceDown .4s ease; }
@keyframes bounceUp { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(16px); } }
@keyframes bounceDown { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }

/* dlist-empty 支持 \n 换行 */
.dlist-empty { white-space: pre-line; }

@media (max-width: 560px) {
  .detail-actions { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed { scroll-behavior: auto; }
  .preview-orb { animation: none; }
  * { animation-duration: .01ms !important; }
}

/* ===================== 导航搜索 ===================== */
.nav-search {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px;
  width: min(280px, 36vw);
  flex: 0 1 auto; min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}
.nav-search:focus-within { border-color: var(--accent); background: rgba(255,255,255,0.09); }
.nav-search-ico { opacity: .6; display: flex; } .nav-search-ico svg { width: 16px; height: 16px; display: block; }
.nav-search-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font-size: 13.5px;
}
.nav-search-input::placeholder { color: var(--text-faint); }
.nav-search-input::-webkit-search-cancel-button { display: none; }
.nav-search-clear {
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
  color: var(--text-dim); background: rgba(255,255,255,0.08);
}
.nav-search-clear:hover { color: #fff; }

/* ===================== 发布按钮 / 弹窗 ===================== */
.btn-publish {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 22px; font-weight: 700; line-height: 1; color: #fff;
  background: #A3E635;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  transition: transform .15s ease;
}
.btn-publish:hover { transform: translateY(-1px) scale(1.05); }
.btn-publish:active { transform: translateY(0) scale(.88); }
.modal-textarea { min-height: 84px; resize: vertical; line-height: 1.5; font-family: inherit; }
.pub-themes { display: flex; gap: 10px; flex-wrap: wrap; }
.pub-theme {
  width: 40px; height: 40px; border-radius: 10px;
  border: 2px solid transparent; opacity: .8; transition: all .15s ease; cursor: pointer;
}
.pub-theme:hover { opacity: 1; transform: scale(1.06); }
.pub-theme.is-on { opacity: 1; border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* ===================== 评论区 ===================== */
.detail-cmt-count {
  display: inline-block; min-width: 18px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: rgba(163,230,53,0.14); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.comment-list[hidden] { display: none; }
.comment-item { display: flex; gap: 10px; }
.comment-av { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(163,230,53,0.30); box-shadow: 0 1px 6px rgba(0,0,0,0.3); flex-shrink: 0; }
.comment-box { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.comment-name { font-size: 13.5px; font-weight: 700; }
.comment-time { font-size: 11.5px; color: var(--text-faint); }
.comment-text { font-size: 14px; color: #e4e6ea; line-height: 1.55; word-break: break-word; }
.comment-compose { display: flex; gap: 10px; align-items: flex-end; }
/* 2026-09-24：评论输入区对齐抖音式——输入框与发送按钮同一行 */
.cmt-input-row { display: flex; align-items: flex-end; gap: 8px; }
.cmt-input-row .comment-input { flex: 1; min-height: 42px; }
.comment-input {
  flex: 1; min-height: 42px; max-height: 120px; resize: vertical;
  padding: 11px 13px; border-radius: 12px; font-size: 14px; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); outline: none;
  font-family: inherit; line-height: 1.4;
}
.comment-input:focus { border-color: var(--accent); }
.comment-send {
  flex-shrink: 0; padding: 11px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #081018;
  background: linear-gradient(135deg, #A3E635, #34D399);
  box-shadow: 0 4px 14px rgba(163,230,53,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.comment-send:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(163,230,53,.35); }
.comment-send:active { transform: scale(.96); }
.comment-login-tip {
  width: 100%; text-align: center; padding: 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  background: rgba(163,230,53,0.10); border: 1px solid rgba(163,230,53,0.26); cursor: pointer;
}
/* 评论深度化：作者标识 / @提及高亮 / 带作品评论 */
.cmt-author-badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #070A14;
  background: #C6F432; padding: 1px 7px; border-radius: 999px;
}
.cmt-mention { color: var(--accent); font-weight: 600; }
.cmt-attach-card {
  margin: 7px 0 2px; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 12px; cursor: pointer; max-width: 86%;
  border: 1px solid rgba(255,255,255,0.16); color: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.cmt-attach-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.36); }
.cmt-attach-ico { font-size: 15px; }
.cmt-attach-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cmt-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex: 1; }
.cmt-pick-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  transition: color .15s, border-color .15s, background .15s; cursor: pointer;
}
.cmt-pick-btn svg { flex: none; opacity: .85; }
.cmt-pick-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.cmt-pick-btn.is-on { color: #fff; background: rgba(163,230,53,0.24); border-color: rgba(163,230,53,0.6); }
.cmt-attach-tag {
  font-size: 12px; color: #C6F432; background: rgba(163,230,53,0.14);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
/* 图片评论：评论区展示的图片 */
.cmt-img {
  display: block; max-width: 100%; max-height: 240px; margin-top: 8px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); cursor: zoom-in;
}
.cmt-img-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #C6F432;
  background: rgba(163,230,53,0.14); padding: 3px 10px 3px 4px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; max-width: 46%;
}
.cmt-img-tag-img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
/* 共享表情包面板（评论 + 私信） */
.sticker-panel {
  z-index: 300; width: 240px; max-height: 300px; overflow: hidden;
  background: rgba(19,26,46,0.97); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5); display: flex; flex-direction: column;
}
.sticker-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: #fff;
}
.sticker-add-btn {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #C6F432;
  background: rgba(163,230,53,0.18); border: 1px solid rgba(163,230,53,0.4); cursor: pointer;
}
.sticker-add-btn:hover { color: #fff; }
.sticker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px;
  overflow-y: auto; min-height: 0;
}
.sticker-cell {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; padding: 0;
}
.sticker-cell:hover { border-color: rgba(163,230,53,0.6); }
.sticker-cell-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sticker-del {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; line-height: 14px;
  border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px;
  border: none; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0; text-align: center;
}
.sticker-cell:hover .sticker-del { opacity: 1; }
.sticker-empty { grid-column: 1 / -1; color: var(--text-dim); font-size: 12px; padding: 14px 4px; text-align: center; }
.cmt-pick-list {
  width: 100%; margin: 2px 0 10px; padding: 10px; box-sizing: border-box;
  background: rgba(0,0,0,0.30); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.cmt-pick-label { width: 100%; font-size: 12px; color: var(--text-dim); }
.cmt-pick-item {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  text-shadow: 0 1px 5px rgba(0,0,0,.6); transition: transform .12s, border-color .12s;
}
.cmt-pick-item:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.4); }
.cmt-pick-close { margin-left: auto; font-size: 11.5px; color: var(--text-dim); background: none; border: none; cursor: pointer; }
.cmt-pick-close:hover { color: #fff; }

/* ===================== 相关作品 ===================== */
.rel-list { display: flex; flex-direction: column; gap: 10px; }
.rel-item {
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.rel-item:hover { background: rgba(255,255,255,0.05); border-color: var(--border); }
.rel-thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }
.rel-info { min-width: 0; }
.rel-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
/* ==== 接龙树（二创演化史） ==== */
.tree-branch { display: grid; grid-template-columns: 14px 1fr; }
.tree-branch > .tree-node { grid-column: 2; }
.tree-root .rel-title { color: var(--accent, #A3E635); }
.tree-thumb { width: 44px; height: 44px; }
/* 树形竖线：每个分支左侧的引导线（第一级不显示，根节点下开始） */
.rel-list > .tree-branch > .tree-node { position: relative; }
.rel-list > .tree-branch > .tree-node::before {
  content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 1px;
  background: rgba(163,230,53,0.35);
}
.rel-list > .tree-branch > .tree-node::after {
  content: ""; position: absolute; left: -14px; top: 26px; width: 8px; height: 1px;
  background: rgba(163,230,53,0.35);
}
/* 追更入口：同作者更多作品 */
.rel-more {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 12px;
  border-radius: 12px; cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 700;
  background: rgba(163,230,53,0.10); border: 1px dashed rgba(163,230,53,0.35);
  transition: background .15s ease, border-color .15s ease;
}
.rel-more:hover { background: rgba(163,230,53,0.18); border-color: rgba(163,230,53,0.6); }
.rel-more-go { font-size: 12px; opacity: .8; }
/* 卡片社交信号标签 */
.meta-social {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 11.5px; font-weight: 700; color: #C6F432;
  background: rgba(198,244,50,0.12); border: 1px solid rgba(198,244,50,0.3);
  padding: 2px 9px; border-radius: 999px; max-width: 100%;
}

@media (max-width: 560px) {
  .nav-search { width: 42vw; }
}

/* ===================== 实时预览 demo ===================== */
.nav-logo { cursor: pointer; }
.preview-demo { position: absolute; inset: 0; z-index: 1; }
.preview-poster {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease; pointer-events: none;
}
.preview.has-demo .preview-poster { opacity: 0; }
.preview-heart {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%) scale(0);
  font-size: 84px; color: var(--like); opacity: 0;
  text-shadow: 0 4px 30px rgba(255,45,111,.6); pointer-events: none;
}
.preview-heart.pop { animation: heartPop .7s ease forwards; }

/* 显式详情入口（防手滑：单击预览不跳转，想深入看才点 ⓘ） */
.preview-more {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(15,20,36,0.55); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.preview-more:hover { background: rgba(15,20,36,0.82); transform: scale(1.06); border-color: rgba(163,230,53,0.5); }
.preview-more:active { transform: scale(.9); }
.preview-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 抖音式：双击落点爆开大红心（放大飞升淡出） */
.tap-heart {
  position: fixed; transform: translate(-50%, -50%);
  font-size: 44px; color: #FF2D6F;
  text-shadow: 0 4px 18px rgba(255,45,111,.6);
  pointer-events: none; z-index: 65;
  animation: tapHeart .8s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes tapHeart {
  0%   { transform: translate(-50%,-50%) scale(.35); opacity: 0; }
  16%  { transform: translate(-50%,-50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 96px)) scale(1.35); opacity: 0; }
}
@keyframes heartPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
.detail-demo { position: absolute; inset: 0; }

/* 聊天 demo */
.demo-chat .chat-box { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; padding: 18px; overflow: hidden; }
.chat-row { display: flex; } .chat-row.user { justify-content: flex-end; }
.bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.12); white-space: pre-wrap; word-break: break-word; }
.chat-row.user .bubble { background: #A3E635; border: none; }

/* 数据大屏 demo */
.demo-dash { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,.25); }
.dash-top { display: flex; gap: 10px; }
.dash-kpi { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px; }
.dash-kpi b { display: block; font-size: 20px; font-weight: 800; } .dash-kpi span { font-size: 11px; color: var(--text-dim); }
.dash-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.dash-bars i { flex: 1; border-radius: 3px 3px 0 0; min-height: 4px; transition: height .2s ease; }
.dash-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: scan 3s linear infinite; }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }

/* 番茄钟 demo */
.demo-pomo { position: absolute; inset: 0; }
.pomo-ring { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 150px; height: 150px; }
.pomo-time { position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-50%); text-align: center; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pomo-btns { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 10px; justify-content: center; }
.pomo-btns button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
.pomo-btns button:hover { background: rgba(255,255,255,.22); }

/* 时钟 demo */
.demo-clock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.clk-time { font-size: clamp(34px, 8vw, 56px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 2px; text-shadow: 0 0 24px currentColor; }
.clk-date { font-size: 13px; color: var(--text-dim); }

/* 渐变壁纸 demo */
.demo-mesh { position: absolute; inset: 0; overflow: hidden; }
.demo-mesh i { position: absolute; width: 60%; height: 60%; border-radius: 50%; filter: blur(50px); opacity: .5; }
.demo-mesh .m1 { left: -10%; top: -10%; animation: drift1 14s ease-in-out infinite; }
.demo-mesh .m2 { right: -10%; bottom: -10%; animation: drift2 16s ease-in-out infinite; }
.demo-mesh .m3 { left: 30%; top: 30%; background: rgba(255,255,255,.25); animation: drift1 18s ease-in-out infinite reverse; }
.demo-mesh.static i { animation: none; }
@keyframes drift1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px, 24px) scale(1.2); } }
@keyframes drift2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px, -22px) scale(1.15); } }

/* 打字机 demo */
.demo-type { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.type-text { font-size: clamp(18px, 4vw, 26px); font-weight: 700; line-height: 1.6; text-align: center; text-shadow: 0 0 20px currentColor; }

/* 决策转盘 demo */
.demo-decide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.decide-wrap { position: relative; width: min(70vw, 240px); height: min(70vw, 240px); }
.decide-wrap canvas { width: 100%; height: 100%; border-radius: 50%; background: #15151f; box-shadow: 0 0 34px rgba(0,0,0,.55); }
.decide-ptr { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid #fff; z-index: 2; }
.decide-res { font-size: 14px; font-weight: 700; min-height: 20px; }

/* 随机点名 demo */
.demo-roll { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.roll-name { font-size: clamp(34px, 9vw, 52px); font-weight: 800; letter-spacing: 2px; min-height: 1.2em; text-shadow: 0 0 26px rgba(255,255,255,.35); }
.roll-tip { font-size: 12px; color: var(--text-dim); }
.roll-btn { padding: 8px 22px; border: none; border-radius: 999px; font-size: 14px; font-weight: 800; color: #070A14; cursor: pointer; }
.roll-btn:hover { filter: brightness(1.12); }

/* ===================== Fork 源码弹窗 ===================== */
.modal-fork { width: min(560px, 92vw); }
.fork-code {
  max-height: 46vh; overflow: auto;
  background: rgba(0,0,0,.4); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin: 4px 0 14px;
}
.fork-code code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; color: #d6d8dc; white-space: pre;
}
/* D4：源码语法高亮配色（VSCode 暗色风） */
.fork-code .hc-com { color: #6a9955; font-style: italic; }
.fork-code .hc-str { color: #ce9178; }
.fork-code .hc-num { color: #b5cea8; }
.fork-code .hc-key { color: #569cd6; }
.fork-code .hc-tag { color: #4ec9b0; }

/* ===================== 信息流控制栏 ===================== */
.feed-bar {
  position: fixed; left: 0; right: 0;
  top: calc(var(--nav-h) + var(--safe-t));
  z-index: 35;
  padding: 8px 14px 6px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, rgba(7,10,20,0.82) 0%, rgba(7,10,20,0.62) 55%, rgba(7,10,20,0) 100%);
  pointer-events: none;
}
.feed-bar > * { pointer-events: auto; }

/* 下拉刷新指示器（顶部居中胶囊，跟随下拉距离浮现） */
.ptr {
  position: fixed; left: 50%; top: 56px; z-index: 60;
  transform: translate(-50%, -60px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.3,1,.4,1), opacity .22s ease;
}
.ptr-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: ptrspin .8s linear infinite; animation-play-state: paused;
}
.ptr.ready .ptr-spinner, .ptr.loading .ptr-spinner { animation-play-state: running; }
.ptr.loading .ptr-text { color: var(--accent); }
@keyframes ptrspin { to { transform: rotate(360deg); } }
.feed-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 999px;
}
.seg-btn {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); transition: color .15s ease, background .15s ease;
}
.seg-btn:hover { color: #fff; }
.seg-btn.is-on {
  color: #fff;
  background: rgba(163,230,53,0.14);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.login-seg { align-self: center; margin-bottom: 4px; }
.login-seg[hidden] { display: none; }
#loginPassword[hidden] { display: none; }
.shuffle-btn {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; gap: 5px;
}
.shuffle-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.22); }
.shuffle-btn:active { transform: scale(0.96); }
.tag-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tag-chips::-webkit-scrollbar { display: none; }
.tag-chip {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: rgba(163,230,53,0.10);
  border: 1px solid rgba(163,230,53,0.26); transition: all .15s ease;
}
.tag-chip:hover { background: rgba(163,230,53,0.18); }
.tag-chip.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ===================== 关注按钮 ===================== */
.btn-follow {
  margin-left: 10px; padding: 5px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  transition: all .15s ease;
}
.btn-follow:hover { background: rgba(163,230,53,0.16); border-color: rgba(163,230,53,0.40); color: #fff; }
.btn-follow.is-on { color: var(--text-dim); background: rgba(255,255,255,0.06); border-color: var(--border); }
.btn-follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail-follow { margin-left: auto; }

/* ===================== 自定义代码预览（iframe） ===================== */
.custom-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; touch-action: pan-y; }
/* 2026-09-24 P1：长页面作品（拼豆/变身类）显示不全修复——
   fit-overflow：iframe 高度让出给内容，内容超高时内部滚动（不再被视口截断）。
   对齐详情页 custom-fit 机制，swipe 卡片补齐。 */
.mount-fit-overflow, .preview-demo.fit-overflow { pointer-events: auto; }
body.swipe-immersive .card.has-tall-demo .preview-demo.fit-overflow .custom-frame {
  height: auto;
  min-height: 100%;
  max-height: 100%;
  position: relative;
}
/* fit 容器：桌面保持 inset:0（= 预览区高），超高内容容器内滚动、容器底不超视口 */
body.swipe-immersive .card.has-tall-demo .preview-demo.fit-overflow {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.swipe-immersive .card.has-tall-demo .preview-demo.fit-overflow::-webkit-scrollbar { width: 4px; }
body.swipe-immersive .card.has-tall-demo .preview-demo.fit-overflow::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
body.swipe-immersive .card:not(.is-playing) .preview-demo.fit-overflow .custom-frame { pointer-events: none; }
/* 游玩态长页面：放开触摸滚动（父级 touch-action 不阻断 iframe 内滚动） */
body.playing-custom .preview-demo.fit-overflow { touch-action: auto; }

/* ===================== 2026-09-25 P1：长内容作品（海龟汤级）手机端显示不全修复 =====================
   根因：feed 卡浏览态，左下 meta 信息卡（作者/关注/标题/描述）+ 右侧竖排操作按钮悬浮盖在
   fit-overflow 长内容 iframe 上，画面下部交互被遮死 → 手机端"显示不完全"。
   修复：
   ① 游玩态（.is-playing）：meta + 右侧 actions 整组隐藏，作品独占全屏（含滚动条侧）；
   ② 浏览态长内容（.has-tall-demo）：meta 压缩上移收窄、隐藏描述/标签，露出更多游戏画面。 */
body.swipe-immersive .card.is-playing .meta,
body.swipe-immersive .card.is-playing .actions { display: none !important; }
body.swipe-immersive .card.has-tall-demo .meta {
  max-width: 46vw;
  bottom: calc(14px + var(--safe-b));
  left: max(14px, env(safe-area-inset-left, 0px));
}
body.swipe-immersive .card.has-tall-demo .meta .meta-desc,
body.swipe-immersive .card.has-tall-demo .meta .meta-tags { display: none !important; }
body.swipe-immersive .card.has-tall-demo .meta .meta-title { font-size: clamp(14px, 2.6vw, 18px); margin-bottom: 0; }
body.swipe-immersive .card.has-tall-demo .meta .meta-author { margin-bottom: 6px; }
body.swipe-immersive .card.has-tall-demo .meta .meta-avatar { width: 32px; height: 32px; }
body.swipe-immersive .card.has-tall-demo .meta .meta-name { font-size: 13px; }

/* ===================== 评论侧滑抽屉 ===================== */
.cmt-mask {
  position: fixed; inset: 0; z-index: 63;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
.cmt-mask[hidden] { display: none; }
.cmt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  max-height: 82vh; max-height: 82dvh; max-height: calc(var(--vvh, 82dvh) * 0.82);
  display: flex; flex-direction: column;
  background: #0c0c10; border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.3,.8,.3,1);
}
.cmt-sheet[hidden] { display: block; transform: translateY(100%); pointer-events: none; }
.cmt-sheet:not([hidden]) { transform: translateY(0); }
.cmt-sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.cmt-sheet-close { width: 40px; height: 40px; border-radius: 50%; color: var(--text-dim); font-size: 16px; background: rgba(255,255,255,0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cmt-sheet-close:hover { color: #fff; }
.cmt-sheet-title { flex: 1; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt-sheet-count { font-size: 13px; color: var(--text-dim); }
.cmt-sheet-preview {
  position: relative; width: 100%; height: 120px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); overflow: hidden;
}
/* 评论侧滑里的预览 iframe 保持不可交互（避免点击 iframe 拦截"打开详情"的语义） */
.cmt-sheet-preview iframe { pointer-events: none; }
.cmt-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cmt-compose { flex-shrink: 0; padding: 12px 14px calc(12px + var(--safe-b)); border-top: 1px solid var(--border); }
.cmt-item { display: flex; gap: 10px; }
.cmt-item.cmt-reply { margin-left: 0; }
.cmt-children { margin-top: 12px; margin-left: 22px; padding-left: 12px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.cmt-actions { margin-top: 4px; }
.cmt-reply-btn { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.cmt-reply-btn:hover { color: var(--accent); }
.cmt-report-btn { margin-left: 12px; font-size: 12px; opacity: 0.55; transition: opacity .15s ease; }
.cmt-report-btn:hover { opacity: 1; }
.cmt-reply-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cmt-reply-to { font-size: 12.5px; color: var(--accent); }
.cmt-reply-cancel { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; color: var(--text-dim); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.cmt-reply-cancel:hover { color: #fff; }
.btn-view-comments {
  width: 100%; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #fff;
  background: #A3E635; transition: transform .15s ease;
}
.btn-view-comments:hover { transform: translateY(-1px); }

/* ===================== 抽屉列表：头像 / 编辑删除 ===================== */
.dlist-thumb-av { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(163,230,53,0.30); box-shadow: 0 1px 6px rgba(0,0,0,0.3); flex-shrink: 0; object-fit: cover; }
.dlist-acts { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.dlist-act {
  width: 30px; height: 30px; border-radius: 8px; font-size: 14px;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  flex-shrink: 0; transition: all .15s ease;
}
.dlist-act:hover { color: #fff; background: rgba(255,255,255,0.12); }
.dlist-act-del:hover { color: #FF2D6F; background: rgba(255,45,111,0.14); border-color: rgba(255,45,111,0.3); }

/* 发布弹窗代码框 */
.pub-code { min-height: 100px; resize: vertical; line-height: 1.5; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12.5px; }

/* 多文件自定义作品编辑器 */
.pub-files { display: flex; flex-direction: column; gap: 6px; }
.pub-files-bar { display: flex; align-items: stretch; gap: 8px; }
.pub-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-height: 30px; align-content: flex-start; }
.pub-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; font-size: 12px; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 7px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-tab.is-on { background: #A3E635; color: #fff; border-color: transparent; }
.pub-tab-x { font-size: 13px; line-height: 1; opacity: 0.7; padding: 0 1px; }
.pub-tab-x:hover { opacity: 1; color: #ffb4b4; }
.pub-files-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.pub-asset-note {
  margin: 2px 0 0; padding: 7px 10px; font-size: 11.5px; line-height: 1.45;
  color: #F1F5F9; background: rgba(198,244,50,0.10); border: 1px solid rgba(198,244,50,0.30);
  border-radius: 8px;
}
.pub-asset-note b { color: #FFFFFF; }

/* 缺失外部依赖：醒目警告条（三级提示中最醒目的一级）
   警告语义 = 琥珀橙 #FFB020 系，与品牌青柠严格分离（旧版把琥珀当品牌金，
   导致橙底配青柠边框撞色，此处在赛博青柠下统一为纯琥珀） */
.pub-dep-warn {
  margin: 0 0 8px; padding: 10px 14px;
  background: rgba(255,176,32,0.10);
  border: 1px solid rgba(255,176,32,0.42); border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: #FFCB80;
  animation: pdw-pulse 1.5s ease-in-out 3;
}
@keyframes pdw-pulse {
  0%, 100% { border-color: rgba(255,176,32,0.42); }
  50% { border-color: rgba(255,204,80,0.80); box-shadow: 0 0 12px rgba(255,176,32,0.22); }
}
.pdw-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.pdw-icon { font-size: 16px; flex-shrink: 0; }
.pdw-head strong { font-size: 13px; color: #FFCB80; }
.pdw-body { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.pdw-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11.5px; border-radius: 5px;
  background: rgba(0,0,0,0.25); color: #FFCB80;
}
.pdw-tag.pdw-css { background: rgba(100,180,255,0.12); color: #9cd0ff; }
.pdw-tag.pdw-js { background: rgba(160,220,120,0.12); color: #b8e088; }
.pdw-action { display: flex; align-items: center; gap: 8px; }
.pdw-hint { font-size: 11px; color: var(--text-dim); opacity: 0.7; }

/* ===== 发布弹窗：表单 + 实时预览 双栏 ===== */
.modal-publish {
  width: min(960px, 94vw);
  max-height: 92vh;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 332px;
  grid-template-rows: minmax(0, 1fr);   /* 行轨道受 max-height 约束，否则子项按内容撑高、overflow 失效 */
  overflow: hidden;
  /* 发布弹窗内局部覆盖：提升深蓝黑底上的文字对比度（旧"灰金→亮沙金"的暖色覆盖
     已随赛博青柠改为冷灰阶，仅比全局 token 更亮，不再引入暖黄） */
  --text-dim: #B4BFD4;
  --text-faint: #8592A8;
}
.modal-publish > * { min-height: 0; }    /* grid 子项默认 min-height:auto 会撑破容器，必须放行收缩 */

/* ===== 发布左栏：三步分区，层级清晰 ===== */
.pub-main { padding: 22px 26px 18px; overflow-y: auto; }
.pub-sec {
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.pub-sec > h3.pub-sec-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 3px; font-size: 14px; font-weight: 800; color: var(--text);
  letter-spacing: .02em;
}
.pst-no {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: #A3E635;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.pub-sec-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.pub-sec > .modal-input,
.pub-sec .pub-code,
.pub-sec .pub-field { margin-bottom: 10px; }
.pub-sec > .modal-input:last-child { margin-bottom: 0; }
.modal-publish .modal-input,
.modal-publish .modal-textarea {
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.12);
}
.modal-publish .modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-publish .modal-input::placeholder { color: var(--text-faint); opacity: 1; }
.modal-publish .pub-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); letter-spacing: .01em; }
.pub-sec .pub-themes { margin-top: 6px; }
.pub-sec .pub-license-note { color: var(--text-faint); }

/* ===== 发布步骤导航：三步可点击跳转，进度可视 ===== */
.pub-steps {
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 16px; padding: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.07);
}
.ps-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  transition: color var(--dur-fast, .14s) ease, background var(--dur-fast, .14s) ease;
}
.ps-step .ps-no {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.10);
  transition: background var(--dur-fast, .14s) ease, color var(--dur-fast, .14s) ease, transform var(--dur-base, .22s) ease;
}
.ps-step .ps-name { white-space: nowrap; }
.ps-step:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.ps-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-step.is-on { color: #fff; background: rgba(163,230,53,0.24); }
.ps-step.is-on .ps-no { background: #A3E635; color: #0F1424; transform: scale(1.06); }
.ps-step.is-done { color: var(--text); }
.ps-step.is-done .ps-no { background: rgba(120,200,140,0.22); color: #9ee6b0; }
.ps-line { flex: 1 1 auto; height: 1px; min-width: 6px; background: rgba(255,255,255,0.14); }

/* 高级区「可选」标记（替代错误的重复编号 3） */
.pst-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px;
  color: var(--accent); background: rgba(163,230,53,0.14);
  border: 1px solid rgba(163,230,53,0.32);
}
/* 高级区折叠态：压成单行条，不再占 290px */
.pub-sec[data-sec="adv"].is-collapsed {
  padding: 11px 14px;
}
.pub-sec[data-sec="adv"].is-collapsed .pub-sec-title { margin-bottom: 0; }

/* 分区入场：逐区淡入上移，给「三步」以节奏感 */
@media (prefers-reduced-motion: no-preference) {
  .modal-publish:not([hidden]) .pub-sec { animation: pubSecIn .34s cubic-bezier(.16,1,.3,1) both; }
  .modal-publish:not([hidden]) .pub-sec[data-sec="step1"] { animation-delay: .04s; }
  .modal-publish:not([hidden]) .pub-sec[data-sec="step2"] { animation-delay: .10s; }
  .modal-publish:not([hidden]) .pub-sec[data-sec="adv"] { animation-delay: .16s; }
  .modal-publish:not([hidden]) .pub-sec[data-sec="step3"] { animation-delay: .22s; }
  .modal-publish:not([hidden]) .pub-steps { animation: pubSecIn .30s cubic-bezier(.16,1,.3,1) both; }
  @keyframes pubSecIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* 模板选中态：右上角对勾，比单纯描边更明确 */
.pub-tpl { position: relative; }
.pub-tpl.is-on::after {
  content: '✓'; position: absolute; top: 5px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #0F1424;
  background: #A3E635;
}
/* 分区键盘可达性 */
.pub-sec:focus-within { border-color: rgba(163,230,53,0.34); }
.lic-btn:focus-visible, .pub-themes button:focus-visible, .pub-fill:focus-visible,
.pub-adv-toggle:focus-visible, .pub-draft:focus-visible, .btn-primary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* 沉浸全屏模式：mask 实心铺满视口、去掉模糊遮罩；内层框用绝对定位 inset:0 填满
   —— 不依赖 vh/dvh，跨浏览器稳定；同时 .modal-publish.is-immersive 作为别名兼容旧规则 */
.modal-mask.is-immersive { background: #0F1424; backdrop-filter: none; }
.modal-mask.is-immersive .modal-publish,
.modal-publish.is-immersive {
  position: absolute; inset: 0; width: auto; height: auto; max-height: none;
  border-radius: 0; padding: 0;
  grid-template-columns: 1fr 460px;   /* 右栏预览加宽，编辑区更大 */
}
.modal-mask.is-immersive .pub-main,
.modal-publish.is-immersive .pub-main { padding-top: 26px; }
.pub-preview {
  border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-label { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .08em; }
.pp-state {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.pp-state.is-live {
  color: #D8F5E5; background: rgba(76,175,80,0.18);
  border-color: rgba(76,175,80,0.45); text-shadow: none;
}
.pp-state.is-loading { color: var(--accent); }
/* 迷你预览条默认隐藏，仅手机 ≤560px 显示 */
.pp-mini { display: none; }
.pp-card {
  position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 58vh;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); background: #0F1424;
}
.pp-card.is-preview-ready { animation: ppFlash .5s ease; }
@keyframes ppFlash {
  0% { box-shadow: 0 0 0 0 var(--accent-glow), 0 16px 40px rgba(0,0,0,0.5); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(163,230,53,0), 0 16px 40px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.12); }
}
.pp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; animation: ppFadeIn .35s ease; }
@keyframes ppFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pp-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.7;
  background: linear-gradient(160deg, rgba(0,0,0,0.30), rgba(0,0,0,0.18));
  pointer-events: none; padding: 20px;
}
.pp-empty[hidden] { display: none; }
.ppe-ico { font-size: 34px; line-height: 1; opacity: .9; animation: ppFloat 2.4s ease-in-out infinite; }
@keyframes ppFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ppe-title { font-size: 15px; font-weight: 800; color: var(--text); }
.ppe-sub { font-size: 12px; color: var(--text-dim); }
.pp-empty .ppe-title, .pp-empty .ppe-sub { text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.pp-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.80), rgba(0,0,0,0.0));
  display: flex; flex-direction: column; gap: 5px; pointer-events: none;
}
.pp-author { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.pp-avatar { width: 20px; height: 20px; border-radius: 50%; }
.pp-lic { margin-left: auto; font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,0.14); padding: 1px 7px; border-radius: 999px; }
.pp-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.pp-desc { font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-tags span { font-size: 11px; color: #C6F432; background: rgba(255,255,255,0.12); padding: 1px 7px; border-radius: 999px; }
.pp-note { font-size: 11px; color: var(--text-dim); text-align: center; margin: 0; }
.pub-quicktags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pub-quicktags .qt {
  font-size: 12px; color: var(--text-dim); background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12); padding: 3px 10px; border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pub-quicktags .qt:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.pub-quicktags .qt.is-on { color: #fff; background: rgba(163,230,53,0.26); border-color: rgba(163,230,53,0.6); }
.pub-code-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.pub-ai-paste { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; color: var(--accent, #A3E635); border-color: rgba(163,230,53,0.38); }
.pub-ai-paste:hover { background: rgba(163,230,53,0.15); }
.pub-fill { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; }
/* —— 发布「分享链接导入」（DeepSeek 一键导入，与手动流程并行） —— */
.pub-import { margin: 0 0 14px; padding: 11px 12px; border: 1px dashed rgba(163,230,53,0.32); border-radius: var(--radius-md, 10px); background: rgba(163,230,53,0.06); }
.pub-import-bar { display: flex; gap: 8px; align-items: center; }
.pub-import-input { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.pub-import-btn { flex: 0 0 auto; white-space: nowrap; border-color: rgba(163,230,53,0.6); color: var(--bg-invert, #0F1424); background: var(--accent, #A3E635); }
.pub-import-btn:disabled { opacity: 0.6; cursor: wait; }
.pub-import-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim, #8592A8); }
.pub-code-hint { font-size: 11px; color: var(--text-dim); }
/* —— 发布「从模板开始」（参数化代码生成，产出真源码可手改） —— */
.pub-tpls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 7px; }
.pub-tpl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.pub-tpl:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.09); }
.pub-tpl.is-on { border-color: var(--accent); background: rgba(163,230,53,0.18); box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 20px rgba(0,0,0,0.25); }
.pub-tpl .pt-ico { font-size: 20px; line-height: 1; color: var(--accent); }
.pub-tpl .pt-name { font-size: 12px; font-weight: 800; color: var(--text); }
.pub-tpl .pt-desc { font-size: 10.5px; line-height: 1.45; color: var(--text-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-tpl-params { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.1); }
.pub-tpl-params[hidden] { display: none; }
.tp-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.tp-row .tp-label { flex: 0 0 74px; font-size: 12px; color: var(--text-dim); }
.tp-row input[type="text"], .tp-row input[type="number"], .tp-row select {
  flex: 1; min-width: 0; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff;
}
.tp-row input[type="color"] { width: 42px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: transparent; cursor: pointer; }
.tp-row textarea { flex: 1; min-height: 64px; resize: vertical; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-family: inherit; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; }
.tp-note { font-size: 11px; color: var(--accent); margin-top: 6px; line-height: 1.5; }
.tp-note .btn-ghost { font-size: 11px; padding: 3px 9px; margin-left: 6px; }
/* 窄屏：模板区从「2 列 × 10 行」(1177px) 改为「2 行 × 横向滑动」
   —— 占位从 43% 表单高度压到约 1/5，符合移动端卡片条交互习惯 */
@media (max-width: 560px) {
  .pub-tpls {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 132px;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 1px 2px 7px;
    scrollbar-width: thin;
    scrollbar-color: rgba(163,230,53,0.30) transparent;
    /* 右侧渐隐提示「还有更多」 */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .pub-tpl { scroll-snap-align: start; }
  .pub-tpls::-webkit-scrollbar { height: 5px; }
  .pub-tpls::-webkit-scrollbar-thumb { background: rgba(163,230,53,0.45); border-radius: 3px; }
  .pub-tpls::-webkit-scrollbar-track { background: transparent; }
}
/* 刚发布的作品：卡片高亮环，给创作者即时反馈 */
.card.just-published { box-shadow: 0 0 0 3px var(--accent), 0 0 40px rgba(163,230,53,0.5); }
.card.just-published::after {
  content: '✨ 你刚发布的'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #0F1424; font-size: 12px; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; z-index: 5; animation: pop .25s cubic-bezier(.2,.9,.3,1.2); pointer-events: none;
}
@media (max-width: 900px) {
  /* 平板：保留双栏，只把预览栏收窄到 240px —— 不再让平板用户掉成单列被迫滚动 */
  .modal-publish { grid-template-columns: minmax(0, 1fr) 240px; max-height: calc(100dvh - 24px); }
  .pub-main { padding: 20px 20px 16px; }
  .pub-preview { padding: 14px 12px; }
  .pp-card { max-height: 52vh; }
  .pub-tpls { grid-template-columns: repeat(3, 1fr); }
  .pub-sec { padding: 12px 14px 14px; }
  .pub-steps { margin-bottom: 14px; }
  /* 全屏模式：平板沉浸态仍给预览留更宽的栏 */
  .modal-mask.is-immersive .modal-publish,
  .modal-publish.is-immersive { grid-template-columns: minmax(0, 1fr) 320px; }
  .modal-mask.is-immersive .pub-preview,
  .modal-publish.is-immersive .pub-preview { max-height: none; }
  /* ===== 移动端 nav 紧凑：按钮缩小 + gap 收紧 + 隐藏文本标签，挤掉"登"的裁切 ===== */
  .nav { padding: var(--safe-t) 12px 0; }
  .nav-right { gap: 6px; }
  .nav-logo { font-size: 16px; }
  .nav-search { display: none; }   /* 让位：搜索已搬到"🔍 发现"tab，nav 不再重复 */
  .btn-help, .btn-viewmode, .btn-nav, .btn-notif, .btn-dm { width: 34px; height: 34px; font-size: 14px; }
  .btn-publish { width: 36px; height: 36px; font-size: 20px; }
  .btn-login { padding: 6px 10px; font-size: 12px; border-radius: 999px; }
}

/* ===== 手机：单栏 + 底部迷你预览条（把 267px 的预览压成 52px，表单腾出 ~215px） ===== */
@media (max-width: 560px) {
  .modal-publish { grid-template-columns: 1fr; max-height: calc(100dvh - 24px); max-height: calc(var(--vvh, 100dvh) - 24px); }
  .pub-main { order: 1; padding: 16px 14px 10px; }
  .pub-preview { order: 2; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 14px 12px; }
  .pub-sec { padding: 11px 12px 13px; margin-bottom: 10px; }
  .pub-steps { margin-bottom: 12px; padding: 3px; gap: 2px; }
  .ps-step { padding: 5px 9px 5px 4px; font-size: 11.5px; }
  .ps-step .ps-no { width: 18px; height: 18px; font-size: 10px; }
  .ps-line { min-width: 4px; }
  /* 迷你预览条：默认只显示它，隐藏大预览卡 */
  .pp-mini { display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; text-align: left;
    background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.14); color: #fff;
    transition: background var(--dur-fast, .14s) ease, border-color var(--dur-fast, .14s) ease; }
  .pp-mini:hover { background: rgba(0,0,0,0.40); border-color: rgba(163,230,53,0.4); }
  .pp-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pp-mini-sw { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
    background: linear-gradient(135deg, #131A2E, #14151a);
    border: 1px solid rgba(255,255,255,0.18); transition: background var(--dur-base, .22s) ease; }
  .pp-mini-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pp-mini-title { font-size: 12.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-mini-sub { font-size: 10.5px; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-mini-go { flex: 0 0 auto; color: var(--accent); font-size: 15px; line-height: 1; }
  .pub-preview .pp-card, .pub-preview .pp-note, .pub-preview .pp-head { display: none; }
  /* 点按展开：迷你条隐去，大预览卡铺满预览区 */
  .pub-preview.is-pp-expanded .pp-mini { display: none; }
  .pub-preview.is-pp-expanded .pp-head,
  .pub-preview.is-pp-expanded .pp-card { display: block; }
  .pub-preview.is-pp-expanded .pp-card { max-height: 60vh; }
  .pub-preview.is-pp-expanded .pp-note { display: block; }
  .pp-mini .pp-mini-sub .pp-mini-close { display: none; }
  /* 沉浸全屏：手机沉浸态预览直接占满，不做迷你折叠 */
  .modal-mask.is-immersive .modal-publish,
  .modal-publish.is-immersive { grid-template-columns: 1fr; }
}

/* =========================================================
   发布弹窗手机端完整显示修复（v150）
   背景：≤560px 单列后，grid-template-rows 只有一行显式 minmax(0,1fr)，
   .pub-preview 落入隐式 auto 行 —— 内容一高就把弹窗撑出 max-height，
   而 .modal-publish { overflow:hidden } 直接把底部裁掉，用户填表/看预览
   的下半部分「显示不完整」且无从滚动（无第二滚动容器）。
   修复：整弹窗改 flex 纵向 + 整体滚动（内容多高滚多高，永远裁不没）；
   max-height 用 100dvh —— 手机浏览器地址栏/底栏占位时弹窗仍落在
   可视区内，不再被浏览器 UI 盖住底部。沉浸全屏同样处理。
   ========================================================= */
@media (max-width: 560px) {
  .modal-publish {
    display: flex; flex-direction: column;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .modal-publish .pub-main { overflow-y: visible; }
  .modal-mask.is-immersive .modal-publish,
  .modal-publish.is-immersive {
    display: flex; flex-direction: column;
    overflow-y: auto;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .modal-mask.is-immersive .pub-main,
  .modal-publish.is-immersive .pub-main { overflow-y: visible; }
  /* 预览大卡同样跟随可视高度（键盘弹出时 60vh 会盖过剩余空间） */
  .pub-preview.is-pp-expanded .pp-card { max-height: 56dvh; max-height: calc(var(--vvh, 56dvh) * 0.56); }
}


@media (max-width: 560px) {
  .feed-bar { padding: 6px 10px 4px; }
  .seg-btn { padding: 5px 11px; font-size: 12.5px; }
  .shuffle-btn { padding: 6px 11px; font-size: 12.5px; }
  .challenge-banner { bottom: calc(var(--safe-b, 0px) + 78px); padding: 7px 8px 7px 10px; gap: 7px; }
  .cb-tag { font-size: 10px; padding: 2px 7px; }
  .cb-title { max-width: 28vw; }
  .cb-desc { display: none; }   /* 手机端描述隐了，挤 320px 也能放下 */
  .cb-go { padding: 6px 10px; font-size: 12px; }
  .cb-close { width: 22px; height: 22px; font-size: 10px; }
  .actions { bottom: 22%; }   /* 抬上去让出 banner 区 */
}

/* ===================== 频道筛选 chips（中性色，区别于标签紫） ===================== */
.channel-chip {
  flex-shrink: 0; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #e6e8ec; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16); transition: all .15s ease;
}
.channel-chip:hover { background: rgba(255,255,255,0.14); }
.channel-chip.is-on { color: #111; background: rgba(255,255,255,0.92); border-color: #fff; }

/* ===================== 卡片「基于 @原作」徽章 ===================== */
.meta-remix {
  margin-top: 8px; display: inline-block; font-size: 12px; font-weight: 600;
  color: #C6F432; background: rgba(198,244,50,0.12); border: 1px solid rgba(198,244,50,0.3);
  padding: 3px 10px; border-radius: 999px;
}

/* ===================== 详情页数据面板 ===================== */
.detail-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.de-remix {
  font-size: 12.5px; font-weight: 600; color: #C6F432; background: rgba(198,244,50,0.12);
  border: 1px solid rgba(198,244,50,0.3); padding: 4px 11px; border-radius: 999px;
}
.de-remix.de-origin { color: #A3E635; background: rgba(163,230,53,0.12); border-color: rgba(163,230,53,0.32); }
.de-views {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); padding: 4px 11px; border-radius: 999px;
}

/* ===================== 详情页接龙血统链 ===================== */
.detail-lineage {
  background: rgba(163,230,53,0.06); border: 1px solid rgba(163,230,53,0.22);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 20px;
}
.detail-lineage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.detail-lineage-label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.detail-lineage-track { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.lineage-item {
  flex: 1 0 auto; min-width: 120px; max-width: 150px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 8px;
  cursor: pointer; transition: filter .15s ease;
}
.lineage-item:hover { filter: brightness(1.18); }
.lineage-item.lineage-now { border-color: rgba(163,230,53,0.55); background: rgba(163,230,53,0.1); }
.lineage-thumb { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.lineage-info { min-width: 0; }
.lineage-name { font-size: 12px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lineage-who { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lineage-arrow { display: flex; align-items: center; color: var(--text-dim); font-size: 14px; flex-shrink: 0; }

/* ===================== 详情页提示词区 ===================== */
.detail-prompt {
  background: rgba(139,124,255,0.07); border: 1px solid rgba(139,124,255,0.28);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 20px;
}
.detail-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.detail-prompt-label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.detail-prompt-text {
  margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text-main);
  background: rgba(255,255,255,0.05); border-radius: 8px; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; max-height: 140px; overflow: auto;
}
.detail-prompt-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }

/* ===================== 发布弹窗上下文徽章 ===================== */
.pub-badge {
  margin: 0 0 16px; padding: 9px 13px; border-radius: 12px; font-size: 13px; font-weight: 700;
  color: #C6F432; background: rgba(198,244,50,0.12); border: 1px solid rgba(198,244,50,0.3);
}
.pub-badge[hidden] { display: none; }

/* ===================== Fork 改造按钮（次级） ===================== */
.fork-actions { display: flex; gap: 10px; }
.btn-ghost {
  flex: 1; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border); transition: background .15s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.16); }

/* ===================== 每日挑战 banner ===================== */
.challenge-banner {
  position: fixed; left: 50%; bottom: calc(var(--safe-b, 0px) + 150px); transform: translate(-50%, 0);
  z-index: 36; display: flex; align-items: center; gap: 10px; max-width: 92vw;
  padding: 9px 10px 9px 14px; border-radius: 999px;
  background: rgba(20,20,24,0.86); border: 1px solid rgba(198,244,50,0.34);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  animation: pop .25s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;   /* 容器不拦截，避免盖住下方卡片交互 */
  transition: transform .25s ease, opacity .2s ease !important;
  will-change: transform, opacity;
}
.challenge-banner.is-hidden {
  transform: translate(-50%, 200%) !important;
  opacity: 0;
  pointer-events: none;
}
.challenge-banner > * { pointer-events: auto; }   /* 按钮/关闭恢复可点 */
.cb-fire { font-size: 15px; }
.cb-tag { font-size: 11px; font-weight: 700; color: #111; background: #C6F432; padding: 2px 8px; border-radius: 999px; }
.cb-title { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.cb-desc { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.cb-go { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #111; background: #C6F432; transition: transform .15s ease; }
.cb-go:hover { transform: translateY(-1px); }
.cb-close { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,0.08); }
.cb-close:hover { color: #fff; }
@media (max-width: 560px) {
  .challenge-banner { bottom: calc(var(--safe-b, 0px) + 160px); }
  .cb-title { max-width: 38vw; }
}

/* ===================== 导航帮助按钮 ===================== */
.btn-help {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 17px; font-weight: 800; line-height: 1; color: var(--text-dim);
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  transition: transform .15s ease, color .15s ease;
}
.btn-help:hover { transform: translateY(-1px); color: #fff; background: rgba(255,255,255,0.16); }
.btn-help:active { transform: translateY(0); }
/* 浏览模式切换按钮（抖音全屏 ⇄ 小红书双列） */
.btn-viewmode {
  height: 34px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.btn-viewmode:hover { transform: translateY(-1px); color: #fff; background: rgba(255,255,255,0.16); }
.btn-viewmode:active { transform: scale(.9); }

/* ===================== 首访轻提示水印（不打断浏览） ===================== */
.intro-hint {
  position: fixed; left: 50%; bottom: calc(92px + var(--safe-b, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(15,20,36,0.78); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 13px; letter-spacing: .4px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  z-index: 60; pointer-events: none;
  animation: hintIn .4s cubic-bezier(.2,.9,.3,1.25);
}
.intro-hint .ih-arrow { color: #FF2D6F; font-weight: 800; font-size: 15px; animation: hintArrow 1.1s ease-in-out infinite; }
.intro-hint .ih-dot { opacity: .35; }
.intro-hint .ih-text { white-space: nowrap; }
.intro-hint.is-out { animation: hintOut .42s ease forwards; }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hintOut { to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes hintArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ===================== 产品定位 / 新手引导弹窗 ===================== */
.modal-intro { width: min(420px, 92vw); }
/* 小屏（手机横屏/矮视口）引导内容可能超高：弹窗自身可滚动，绝不困死手势 */
.modal-intro { max-height: calc(100dvh - 40px); max-height: calc(var(--vvh, 100dvh) - 40px); overflow-y: auto; overscroll-behavior: contain; }
.intro-steps { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }
.intro-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #d6d8dc; }
.intro-step .is-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #111; background: var(--accent);
}
.intro-step b { color: #fff; font-weight: 700; }
.intro-note {
  font-size: 12.5px; color: var(--fav); background: rgba(198,244,50,0.10);
  border: 1px solid rgba(198,244,50,0.28); border-radius: 12px; padding: 9px 12px; margin-bottom: 16px;
}

/* ===================== 发布表单：二创许可 ===================== */
.pub-field { display: flex; flex-direction: column; gap: 8px; }
.pub-label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.pub-license { display: flex; gap: 8px; flex-wrap: wrap; }
.lic-btn {
  flex: 1; min-width: 92px; padding: 9px 8px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  transition: all .15s ease;
}
.lic-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.lic-btn.is-on { color: #fff; background: rgba(163,230,53,0.20); border-color: var(--accent); }

/* ===================== 许可徽章（卡片 / 详情） ===================== */
.lic-badge, .de-lic {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.lic-by, .de-lic.lic-by { color: #A3E635; background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.3); }
.lic-free, .de-lic.lic-free { color: #34D399; background: rgba(94,139,106,0.12); border: 1px solid rgba(94,139,106,0.3); }
.lic-nd, .de-lic.lic-nd { color: #FF2D6F; background: rgba(255,45,111,0.12); border: 1px solid rgba(255,45,111,0.3); }

/* 可点击的改造关系（卡片 / 详情） */
.meta-remix { cursor: pointer; transition: filter .15s ease; }
.meta-remix:hover { filter: brightness(1.25); }
.de-remix.de-origin { cursor: pointer; transition: filter .15s ease; }
.de-remix.de-origin:hover { filter: brightness(1.3); }

/* ===================== 改造列表弹窗（复用 rel-list 样式） ===================== */
.modal-remix { width: min(440px, 92vw); }
.modal-remix .rel-list { max-height: 50vh; overflow-y: auto; }
.modal-remix .btn-primary { margin-top: 14px; }

/* ===================== P2 新组件（搜索/主页/周榜/审核/收藏分组/评论赞） ===================== */
.btn-nav {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.10); border: none; color: var(--text, #eee);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.btn-nav:hover { transform: scale(1.08); background: rgba(255,255,255,0.18); }

/* —— 搜索下拉面板 —— */
.search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: rgba(20,18,40,0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
}
.nav-search { position: relative; }
.sp-title { font-size: 12px; color: var(--text-dim, #94A3B8); margin: 6px 2px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sp-chip {
  background: rgba(163,230,53,0.14); border: 1px solid rgba(163,230,53,0.25);
  color: var(--text, #eee); font-size: 12px; border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.sp-chip:hover { background: rgba(163,230,53,0.30); }

/* —— 登录弹窗：忘记密码 / 重置 —— */
.login-forgot {
  display: block; text-align: center; font-size: 12px; color: var(--accent, #A3E635);
  margin-top: 10px; cursor: pointer; text-decoration: underline;
}
.login-alt { margin-top: 12px; }
.login-alt .modal-title { font-size: 16px; margin-top: 8px; }
.reset-link {
  display: inline-block; margin-top: 8px; color: var(--accent, #A3E635);
  word-break: break-all; font-size: 12px;
}

/* —— 评论排序（抽屉头部） —— */
.cmt-sort { margin-left: auto; transform: scale(0.85); transform-origin: right center; }

/* —— 作者主页 —— */
.modal-profile { width: min(460px, 94vw); max-height: 82vh; overflow-y: auto; padding-bottom: 20px; }
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 4px; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(163,230,53,0.5); box-shadow: 0 0 0 2px rgba(163,230,53,0.18), 0 3px 14px rgba(0,0,0,0.45);
}
.profile-name { font-size: 18px; font-weight: 700; }
.profile-bio { font-size: 12px; color: var(--text-dim, #94A3B8); text-align: center; max-width: 90%; }
.profile-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim, #94A3B8); }
.ps-item b { color: var(--text, #eee); }
.profile-follow { margin-top: 6px; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.badge {
  background: rgba(163,230,53,0.16); border: 1px solid rgba(163,230,53,0.30);
  color: var(--text, #eee); font-size: 12px; border-radius: 999px; padding: 3px 10px; cursor: default;
}
.profile-works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pw-item { cursor: pointer; border-radius: 12px; overflow: hidden; }
.pw-thumb { aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 8px; background-size: cover; }
.pw-title {
  font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.35); border-radius: 6px; padding: 2px 6px;
}

/* —— 周榜 —— */
.modal-board { width: min(440px, 92vw); }
.board-list { max-height: 60vh; overflow-y: auto; margin-top: 4px; }
.board-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.board-row:hover { background: rgba(255,255,255,0.05); }
.board-rank { font-size: 18px; width: 34px; text-align: center; }
.board-info { flex: 1; min-width: 0; }
.board-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-sub { font-size: 12px; color: var(--text-dim, #94A3B8); }
.board-score { font-size: 12px; color: var(--accent, #A3E635); white-space: nowrap; }
/* 排行榜页签（本周榜 ⇄ 实时热榜） */
.board-seg { display: flex; gap: 6px; margin: 2px 0 10px; }
.board-seg .seg-btn { flex: 1; }
.board-live-mark { color: #ff5d5d; font-size: 12px; margin-left: 8px; white-space: nowrap; }

/* —— 举报审核 —— */
.modal-audit { width: min(480px, 94vw); }
.audit-list { max-height: 60vh; overflow-y: auto; margin-top: 4px; }
.audit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.audit-info { flex: 1; min-width: 0; }
.audit-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-sub { font-size: 11px; color: var(--text-dim, #94A3B8); }
.audit-btns { display: flex; gap: 6px; flex-shrink: 0; }
.audit-btns .btn-ghost, .audit-btns .btn-danger { font-size: 12px; padding: 4px 10px; }

/* —— 收藏分组 —— */
.modal-folder { width: min(380px, 92vw); }
.folder-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.folder-chip {
  background: rgba(163,230,53,0.14); border: 1px solid rgba(163,230,53,0.25);
  color: var(--text, #eee); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.folder-chip:hover { background: rgba(163,230,53,0.30); }
.modal-folder .modal-input { margin-bottom: 10px; }

/* —— 评论点赞 —— */
.cmt-like-btn {
  background: none; border: none; color: var(--text-dim, #94A3B8);
  font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.cmt-like-btn.is-on { color: #FF2D6F; }

/* —— 抽屉收藏分组标题 —— */
.dlist-group {
  font-size: 12px; color: var(--accent, #A3E635); font-weight: 600;
  margin: 10px 2px 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dlist-group:first-child { margin-top: 2px; }

/* —— 设置页内联输入 —— */
.setting-inline { display: flex; gap: 6px; align-items: center; }
.setting-inline .modal-input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; }

/* ===== 表情面板（评论区 / 私信共用） ===== */
.emoji-btn { font-size: 14px !important; line-height: 1; }
.emoji-btn.is-on { color: #fff; background: rgba(163,230,53,0.24); border-color: rgba(163,230,53,0.6); }
.dm-emoji-btn {
  flex: none; width: 38px; height: 38px; border-radius: 12px; font-size: 18px; line-height: 1;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.dm-emoji-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.dm-emoji-btn.is-on { color: #fff; background: rgba(163,230,53,0.24); border-color: rgba(163,230,53,0.6); }

.emoji-panel {
  display: none; position: fixed; z-index: 9999; flex-direction: column;
  width: 308px; max-height: 300px; padding: 0; overflow: hidden;
  background: #16161e; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  animation: emojiPop .14s ease;
}
@keyframes emojiPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.emoji-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; }
.emoji-title { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.emoji-close {
  width: 24px; height: 24px; border-radius: 8px; font-size: 13px; color: var(--text-dim);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); cursor: pointer;
}
.emoji-close:hover { color: #fff; }
.emoji-tabs { display: flex; gap: 4px; padding: 0 8px 8px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.08); }
.emoji-tabs::-webkit-scrollbar { height: 0; }
.emoji-tab {
  flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid transparent; cursor: pointer;
  transition: color .15s, background .15s;
}
.emoji-tab:hover { color: #fff; }
.emoji-tab.is-on { color: #fff; background: rgba(163,230,53,0.24); border-color: rgba(163,230,53,0.6); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px;
  overflow-y: auto; flex: 1;
}
.emoji-grid::-webkit-scrollbar { width: 6px; }
.emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
.emoji-item {
  aspect-ratio: 1 / 1; border: none; border-radius: 8px; font-size: 19px; line-height: 1;
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s; padding: 0;
}
.emoji-item:hover { background: rgba(255,255,255,0.1); transform: scale(1.12); }
.emoji-item:active { transform: scale(0.94); }

/* ===== 编辑资料：头像上传 ===== */
.pe-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pe-avatar-preview {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none;
  background: #A3E635;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.pe-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-avatar-fallback { font-size: 30px; line-height: 1; }
.pe-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pe-avatar-btn { cursor: pointer; }
.pe-avatar-file { display: none; }
.pe-avatar-del { font-size: 12px; color: var(--text-dim); }
.pe-avatar-hint { font-size: 11px; color: var(--text-dim); opacity: 0.8; }

/* ===== 私信头像（支持自定义图） ===== */
.dm-ava-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: block; border: 1.5px solid rgba(163,230,53,0.30); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }

/* ===== 省电 / 低端模式（开关：设置 → 省电 / 低端模式） =====
   目标：老旧手机 / 低端核显电脑。三件事钉死：
   ① 信息流交还原生滚动（touch-action: pan-y），不跑 JS 跟手拖拽 → 走 GPU 合成器滚动
   ② 去除所有 backdrop-filter 模糊层（含弹窗/侧栏，最高 blur(14px)）→ 低端 GPU 不去跑 fragment shader
   ③ reduce-motion 已由 JS（applyLowEnd）加上 → 光斑/翻页动画/降帧随之生效
*/
.low-end .feed { touch-action: pan-y; }
.low-end * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ===== 老机 PC 精简适配（.old-pc，附在 low-end 之上，PC 老机专属） =====
   目标：2009 年台式/上网本（Atom≤1核 + ≤3.5G + HDD + 无独显，鼠标大屏）。
   与 low-end（移动省电）互补但独立：low-end 管动效/模糊，old-pc 管可读性与合成负担。
   ① 大字：--font-base 15→17（低分大屏/老屏幕更好读），标题/计数同缩放
   ② 扁平化：去阴影/去重圆角 → 老合成器不跑 blur/shadow 滤镜
   ③ 禁光斑粒子：激活卡 .preview-orb 无限模糊动画彻底停（每帧全区高斯模糊是 HDD 显卡死穴）
   ④ 加强对比：正文/次要文字精度提升，避免低分屏灰底看不清
   JS 侧：applyLowEnd 命中 low-end 后，若判定为「非触屏的桌面 CPU 弱」额外加 .old-pc。
*/
body.old-pc {
  --font-base: 17px;
  --radius-lg: 10px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --dur-fast: 0s;
  --dur-base: 0s;
  --dur-slow: 0s;
}
body.old-pc .card,
body.old-pc .panel,
body.old-pc .modal,
body.old-pc .g-card,
body.old-pc .toast,
body.old-pc .input-wrap,
body.old-pc .btn-primary {
  box-shadow: none !important;
  text-shadow: none !important;
}
body.old-pc .preview-orb,
body.old-pc .card.is-active .preview-orb { animation: none !important; opacity: .2 !important; }
body.old-pc .text-dim { color: #B0BCCE; }        /* 次要文字提亮，低分屏可读 */
body.old-pc .text-faint { color: #8B98AB; }
body.old-pc * { transition-duration: 0s !important; }   /* 老 U 不再逐帧算过渡 */
body.old-pc .card.is-active { border-width: 1px; }      /* 去 glow 边框叠边，改细描边 */

/* ===== 手机端性能兜底（自动生效，无需设置） =====
   手机 GPU 上，常驻 backdrop-filter 盖在每帧重绘的全屏 canvas 上，
   会强制每次合成整帧模糊重绘（移动端卡顿头号来源）。与 .low-end 同款降级：
   各元素本就带 0.5~0.96 不透明底色，去掉模糊观感一致、每帧填充率大减。
   同时停掉激活卡的 blur(40px) 漂浮光斑无限动画（每帧全区域重算高斯模糊）。 */
@media (pointer: coarse) and (max-width: 920px) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .card.is-active .preview-orb { animation: none; }
}

/* ===== 收藏夹 / 合集 ===== */
.fav-toolbar { display: flex; gap: 8px; margin: 2px 2px 8px; }
.fav-toolbar .btn-ghost { flex: 1; font-size: 12px; padding: 7px 0; }

.dlist-group { display: flex; align-items: center; justify-content: space-between; }
.dlist-group-name { flex: 1; }
.dlist-group-mg {
  flex: none; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; line-height: 1;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  cursor: pointer; transition: color .15s, background .15s;
}
.dlist-group-mg:hover { color: #fff; background: rgba(255,255,255,0.14); }
.dlist-empty.small { padding: 6px 4px; font-size: 12px; color: var(--text-dim); opacity: 0.7; }

/* 收藏夹管理弹窗 */
.modal-favman { width: min(400px, 92vw); }
.favman-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; max-height: 50vh; overflow-y: auto; }
.favman-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.favman-name { flex: 1; font-size: 14px; }
.favman-new { display: flex; gap: 8px; }
.favman-new .modal-input { flex: 1; min-width: 0; }

/* 合集：个人主页区 */
.profile-collections { margin-top: 16px; }
.profile-section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 4px 2px 10px; }
.coll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.coll-card {
  position: relative; padding: 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  transition: border-color .15s, background .15s, transform .12s;
}
.coll-card:hover { border-color: rgba(163,230,53,0.5); background: rgba(163,230,53,0.1); transform: translateY(-1px); }
.coll-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.coll-name { font-size: 14px; font-weight: 700; }
.coll-card-mg {
  flex: none; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; line-height: 1;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--border); cursor: pointer;
}
.coll-card-mg:hover { color: #fff; background: rgba(255,255,255,0.14); }
.coll-desc { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.coll-count { font-size: 12px; color: var(--accent, #A3E635); margin-top: 8px; font-weight: 600; }
.coll-add { margin-top: 12px; width: 100%; }

/* 合集查看弹窗 */
.modal-collection { width: min(440px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.coll-view-head { padding: 2px 2px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.coll-view-name { font-size: 18px; font-weight: 800; }
.coll-view-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.coll-view-works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 0; overflow-y: auto; flex: 1; }
.cw-item { border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); transition: transform .12s, border-color .15s; }
.cw-item:hover { transform: translateY(-2px); border-color: rgba(163,230,53,0.5); }
.cw-thumb { position: relative; aspect-ratio: 3 / 4; }
.cw-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; font-size: 12px; font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,0.6)); }
.coll-view-actions { padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.coll-view-actions .btn-primary { width: 100%; }

/* 合集管理弹窗 */
.modal-collman { width: min(460px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.collman-new { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 10px 0 14px; }
.collman-new .modal-input { min-width: 0; }
.collman-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.collman-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.collman-info { flex: 1; min-width: 0; }
.collman-name { font-size: 14px; font-weight: 700; }
.collman-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.collman-row-acts { display: flex; gap: 6px; flex: none; }
.collman-works { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); max-height: 40vh; overflow-y: auto; }
.collman-works-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.collman-wrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.collman-wname { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-ghost.on { color: #fff; background: rgba(163,230,53,0.24); border-color: rgba(163,230,53,0.6); }

/* ===== 发布弹窗：存草稿 + 发布 并排 ===== */
.pub-submit-row { display: flex; gap: 10px; }
.pub-submit-row .pub-draft { flex: 0 0 auto; }
.pub-submit-row .btn-primary { flex: 1; }

/* ===== 搜索面板筛选 ===== */
.sp-filter { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sp-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-filter-row:last-child { margin-bottom: 0; }
.sp-filter-label { font-size: 12px; color: var(--text-dim); flex: 0 0 32px; }
.sp-lang { display: flex; gap: 6px; }
.sp-lang-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text-dim); font-size: 12px; cursor: pointer; transition: all .15s ease; }
.sp-lang-chip:hover { color: #fff; }
.sp-lang-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text); font-size: 13px; }
.sp-input:focus { outline: none; border-color: var(--accent); }
.sp-select { appearance: none; }
.sp-clear-filter { width: 100%; margin-top: 4px; padding: 7px; border-radius: 10px; border: 1px dashed var(--border); background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; }
.sp-clear-filter:hover { color: #fff; border-color: var(--accent); }

/* ===== 积分与成长 ===== */
.set-pts { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 10px; }
.set-pts-val { font-size: 26px; font-weight: 800; color: var(--accent); }
.set-pts-lv { font-size: 13px; font-weight: 700; color: var(--accent-2); }
.set-pts-actions { display: flex; gap: 8px; }
.set-pts-actions .set-row-btn { flex: 1; }
.set-pts-loading { padding: 8px 2px; color: var(--text-dim); font-size: 13px; }

/* ===== 创作者看板 ===== */
.modal-dash { width: min(440px, 94vw); max-height: 88vh; overflow-y: auto; }
.dash-totals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 4px 0 18px; }
.dash-total { text-align: center; padding: 12px 4px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.dash-total-v { font-size: 18px; font-weight: 800; color: var(--accent); }
.dash-total-k { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.dash-chart-title, .dash-log-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 6px 0 10px; }
.dash-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.dash-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.dash-bar { width: 70%; max-width: 22px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transition: height .3s ease; min-height: 4px; }
.dash-bar-label { font-size: 10px; color: var(--text-dim); }
.dash-log { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.dash-log-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 12.5px; }
.dash-log-reason { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-log-delta { font-weight: 700; }
.dash-log-delta.up { color: #34d399; }
.dash-log-delta.down { color: #FF2D6F; }
.dash-log-time { font-size: 11px; color: var(--text-dim); flex: 0 0 auto; }

/* ===== 合集封面 ===== */
.coll-card-cover { height: 88px; border-radius: 10px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.06); margin-bottom: 8px; }
.collman-cover-mini { width: 40px; height: 40px; border-radius: 8px; margin-top: 6px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.06); flex: 0 0 auto; }

/* ===== 评论删除按钮 ===== */
.cmt-del-btn { background: none; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.cmt-del-btn:hover { color: #FF2D6F; background: rgba(251,113,133,0.12); }

/* ===== 合规：注册同意勾选 + 协议弹窗 ===== */
.agree-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px;
  font-size: 12px; color: var(--text-dim); line-height: 1.5; cursor: pointer;
}
.agree-row input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.agree-row a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.doc-modal {
  position: fixed; inset: 0; margin: auto; z-index: 90;   /* 自带居中遮罩语义，覆盖登录弹窗 */
  width: min(480px, 92vw); max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--bg-2, #17171f); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}
.doc-modal[hidden] { display: none; }
.doc-modal::before {   /* 点击弹窗外部区域 = 关闭 */
  content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,0.66);
}
.doc-modal .modal-title { margin-bottom: 12px; }
.doc-body {
  overflow-y: auto; min-height: 0; padding-right: 6px;
  font-size: 13px; line-height: 1.75; color: var(--text-dim);
}
.doc-body .doc-p { margin: 0 0 10px; }
.doc-body .doc-p:first-child { color: var(--text-2, #e8e9ee); }

/* ===== 注册验证码 ===== */
.captcha-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.captcha-expr { flex: 1; font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-align: center; }
.captcha-input { flex: 0 0 76px; min-width: 0; text-align: center; }
.captcha-refresh { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.captcha-refresh:hover { color: #fff; }

/* ===== 移动端底部导航 TabBar ===== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none;  /* 桌面端默认隐藏，移动端 media query 内显示 */
  background: rgba(11,10,26,0.94);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
  /* 打开评论抽屉/详情时整体隐藏，避免遮挡底部输入与相关作品（2026-09-22 UX 修复） */
  transition: transform .25s ease;
}
body.cmt-open .tabbar,
body.detail-open .tabbar { transform: translateY(100%); pointer-events: none; }
.tabbar-btn {
  flex: 1; min-width: 0; min-height: 52px;  /* 移动端触控标准 ≥44px，放大到 52 更好按 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 0; cursor: pointer; color: var(--text-dim);
  -webkit-tap-highlight-color: transparent; padding: 5px 0; border-radius: 10px;
  transition: color .15s;
}
.tabbar-btn:active { background: rgba(255,255,255,0.06); }
.tabbar-btn.is-active { color: var(--accent, #A3E635); }
.tabbar-ico { line-height: 1; display: flex; }
.tabbar-ico svg { width: 25px; height: 25px; display: block; }   /* 22→25 图标更大更醒目 */
.tabbar-label { font-size: 11px; line-height: 1; }
/* 中置发布签（2026-09-25 移动端重构）：渐变胶囊凸起，拇指黄金区，最常用 → 视觉强化 */
.tabbar-btn.tabbar-pub { flex: 1.25; position: relative; z-index: 2; }
.tabbar-pub .tabbar-ico {
  width: 54px; height: 54px; margin-top: -18px;   /* 往上浮出 tabbar，制造"凸出"感 */
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: linear-gradient(160deg, #A3E635, #22D3EE 55%, #8B5CF6);
  box-shadow: 0 6px 18px rgba(163,230,53,.42), 0 2px 6px rgba(0,0,0,.3);
  transform: rotate(45deg);                        /* 钻石形 */
}
.tabbar-pub .tabbar-ico svg { width: 30px; height: 30px; transform: rotate(-45deg); stroke: #0F1424; }
.tabbar-pub .tabbar-label { margin-top: 2px; font-weight: 700; color: #fff; }
.tabbar-btn.tabbar-pub.is-active .tabbar-ico { filter: none; }
.tabbar-btn.tabbar-pub:active .tabbar-ico { transform: rotate(45deg) scale(.92); }
.tabbar-btn.tabbar-pub:active .tabbar-label { color: var(--accent, #A3E635); }
/* 2026-09-24 图标系统 v2：渐变手绘图标 + 激活发光（SVG 渐变描边不再依赖 currentColor 变色，
   改用 filter drop-shadow 发光做状态区分——性能友好，纯 CSS） */
.tabbar-ico svg, .action-btn svg { transition: filter .18s ease, transform .18s ease; }
.tabbar-btn.is-active .tabbar-ico svg { filter: drop-shadow(0 0 6px rgba(163,230,53,.8)) drop-shadow(0 0 14px rgba(34,211,238,.5)); }
.tabbar-btn:not(.is-active):hover .tabbar-ico svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.45)); }
.action-btn:hover svg { filter: drop-shadow(0 0 6px rgba(163,230,53,.65)); }
.detail-action.is-on .action-btn svg { filter: drop-shadow(0 0 8px currentColor); }
.detail-action.is-on .action-btn { background: rgba(255,255,255,0.08); }
/* 旧 currentColor 状态色保留（计数文字仍随 is-on 变色） */
/* 移动端显示：屏幕 ≤900px（覆盖平板/折叠屏）；主内容预留底部空间避免被遮挡 */
@media (max-width: 900px) {
  .tabbar { display: flex; }
  /* 单列模式：左下角 meta（作者/标题/标签）抬到底部 tabbar 之上，避免被遮挡 */
  .meta { bottom: calc(74px + var(--safe-b)); }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
/* 桌面端明确隐藏（防止某些宽屏误显示）。
   v125：沉浸模式的 tabbar 隐藏也归到这里——手机端（≤900px）沉浸模式要显示 tabbar，
   所以这条必须限定在桌面断点内，不能再是无条件全局规则。 */
@media (min-width: 901px) {
  .tabbar,
  body.swipe-immersive .tabbar { display: none !important; }
}

/* 短横屏（手机/折叠屏横置）：顶部 UI + 底部 tabbar 吃掉大半高度 → 缩小 nav、隐藏 tabbar、抬升 meta，保证作品可看 */
@media (max-height: 500px) and (max-width: 900px) {
  :root { --nav-h: 44px; }
  .tabbar { display: none; }
  .meta { bottom: calc(10px + var(--safe-b)); }
}

/* ===== 移动端触控目标优化 ===== */
@media (max-width: 900px) {
  .btn-primary { min-height: 46px; padding: 12px 16px; }
  .action-btn { min-width: 44px; min-height: 44px; }
  .nav-search-input { min-height: 40px; font-size: 16px; /* 防 iOS 缩放 */ }
  .sp-lang-chip, .cmt-pick-btn, .captcha-refresh { min-height: 40px; min-width: 40px; }
}

/* ===== 发布：灵感来源 + 二创许可说明 ===== */
.pub-license-note { font-size: 11px; color: var(--text-dim); opacity: .85; margin: 6px 0 0; }

/* ===== feed-bar 滚动智能隐藏：向下滚 >50px 收起（防遮挡），回顶自动展开 ===== */
.feed-bar {
  transition: transform .25s ease, opacity .2s ease !important;
  will-change: transform, opacity;
}
.feed-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ===== v59 移动端首页简洁化 ===== */
/* 新入口：视图切换（feed-bar 右侧）/ 榜单（发现面板顶部）/ 通知（抽屉头部）——桌面端隐藏 */
.vm-btn { flex-shrink: 0; width: 34px; height: 30px; padding: 0; font-size: 14px; }
.fs-btn {
  flex-shrink: 0; width: 34px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.fs-btn:hover { color: #fff; background: rgba(255,255,255,0.14); }
.fs-btn:active { transform: scale(.9); }
.fs-btn svg { width: 14px; height: 14px; }
.sp-board-btn {
  display: block; width: 100%; margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  color: #C6F432; background: rgba(198,244,50,0.10); border: 1px solid rgba(198,244,50,0.28);
}
.sp-board-btn:active { background: rgba(198,244,50,0.2); }
.drawer-bell {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  transition: background .15s ease;
}
.drawer-bell:active { background: rgba(255,255,255,0.16); }

/* 移动端：feed-bar 紧凑单行 + chips 横向滚动 + meta 精简 */
@media (max-width: 900px) {
  .feed-bar { padding: 5px 10px 6px; }
  .feed-bar-row { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .feed-bar-row::-webkit-scrollbar { display: none; }
  .seg-btn { padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }
  .shuffle-btn { padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }
  .shuffle-btn span { display: none; }            /* 换一批/刷新 只留图标，省宽度 */
  .shuffle-btn svg { margin: 0; }
  .tag-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .tag-chips::-webkit-scrollbar { display: none; }
  .tag-chips .meta-tag { white-space: nowrap; }
  /* 卡片信息区精简：描述最多 2 行；社交信号 / 许可徽章移动端隐藏（功能不受影响） */
  .meta-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta-social, .lic-badge { display: none; }
  .meta-remix { font-size: 11px; padding: 2px 8px; margin-top: 4px; }
}

/* ===== v60 移动端 B 站式首页整合 + 摄像头避让 ===== */
@media (max-width: 900px) {
  /* ① 前摄像头避让：nav 加高 + 内容下移（--nav-h 联动 feed-bar/内容起始位）——
     发布按钮中心 ≈ safe-t + 42px，避开前置挖孔摄像头（safe-t=0 也有 42px 兜底） */
  :root { --nav-h: 68px; }
  .nav { padding-top: calc(var(--safe-t, 0px) + 16px); }
  /* ①.5 卡片底部为 tabbar 让位（2026-09-25 三修）：distixed feed 高=--vvh 时卡底仍落进
     tabbar(62px+safe-b) 之下被遮 → 卡高扣减 tabbar 高度。scroll-snap 按卡滚动不受影响。 */
  .card { height: calc(var(--vvh, 100dvh) - 78px - env(safe-area-inset-bottom, 0px)); }
  .card-skeleton { height: calc(var(--vvh, 100dvh) - 78px - env(safe-area-inset-bottom, 0px)); }
  /* ② feed-bar 简略（v62）：只留「全部/关注/新作」+ 频道 chips；隐藏 排序/换一批/刷新/视图/标签行
     —— 放不下被遮的问题一并解决；刷新靠下拉手势（已有） */
  #sortSeg, .shuffle-btn:not(.vm-btn), .tag-chips { display: none !important; }
  .feed-bar { padding: 4px 10px 5px; }
  /* ② B 站式搜索：展开时 logo / 发布 / 头像让位，搜索条独占一行 */
  body.nav-is-searching .nav-logo,
  body.nav-is-searching .nav-right { display: none; }
  /* 移动端发布已移至底部中置悬浮钮（#tabPub）→ 顶部 nav 不再重复放发布（2026-09-25 重构） */
  .nav .btn-publish { display: none; }
  body.nav-is-searching .nav-search {
    display: flex !important; width: 100%; max-width: none; flex: 1 1 auto;
  }
  /* ③ 去掉上下滑动箭头：卡片左右槽 + 浮层翻页按钮都隐藏（手机上滑即可翻页） */
  .nav-gutter, .feed-nav-btn { display: none !important; }
  /* ④ 详情按钮不再与右侧 Fork 重合：移动端隐藏「ⓘ 详情」（点标题/作品即可进详情） */
  .preview-more { display: none !important; }
  /* ⑤ 搜索面板（桌面端入口保留）若在手机被打开：筛选行横向滚动显示全 */
  .sp-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sp-filter::-webkit-scrollbar { display: none; }
  .sp-filter-row { flex-wrap: nowrap; }
}

/* ===== v63：作品区下移 + 抽屉昵称避让摄像头 ===== */
@media (max-width: 900px) {
  /* ② 「我」抽屉头部昵称：safe-area + 34px 兜底（safe-t=0 也避开前置挖孔 25-35px） */
  .drawer-head { padding: calc(34px + var(--safe-t)) 18px 16px; }
}

/* =========================================================
   全局一致性打磨（v69 扩展自设置页/feed）：键盘焦点环 + 激活态辉光 + 搜索/标签
   统一全站视觉语言（与「做到最优」要求一致）。全部纯视觉，不触逻辑。
   ========================================================= */

/* 统一键盘焦点环：覆盖此前未覆盖的交互元素（与设置页/feed 一致） */
.drawer-tab:focus-visible,
.notif-item:focus-visible,
.dm-item:focus-visible,
.dlist-item:focus-visible,
.dlist-act:focus-visible,
.profile-follow:focus-visible,
.profile-dm:focus-visible,
.seg-btn:focus-visible,
.tag-chip:focus-visible,
.sp-chip:focus-visible,
.cmt-reply-btn:focus-visible,
.cmt-pick-btn:focus-visible,
.dm-emoji-btn:focus-visible,
.dlist-group-mg:focus-visible,
.cmt-del-btn:focus-visible,
.drawer-close:focus-visible,
.nav-search-input:focus-visible,
.modal-input:focus-visible,
.login-forgot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 激活态辉光：标签 / 分段 / 芯片统一 accent 反馈语言 */
.drawer-tab.is-active { box-shadow: inset 0 0 0 1px rgba(163,230,53,0.35), 0 3px 10px rgba(0,0,0,0.35); }
.seg-btn.is-on { box-shadow: 0 0 0 1px rgba(163,230,53,0.4), 0 3px 10px rgba(0,0,0,0.35); }
.sp-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* 搜索输入聚焦光环（与弹窗输入一致） */
.nav-search-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }

/* 个人主页 关注/私信 按钮：hover accent 描边，统一 CTA 语言 */
.profile-follow:hover,
.profile-dm:hover { background: rgba(163,230,53,0.16); border-color: rgba(163,230,53,0.40); color: #fff; }

/* 列表/通知/私信项 hover 轻微 accent 辉光（不挤压布局） */
.dlist-item:hover { border-color: rgba(163,230,53,0.35); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.notif-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.dm-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }

/* 全局「减少动态效果」兜底：尊重系统无障碍偏好，降级装饰性动画/过渡/滚动惯性。
   不影响功能 transform——swipe 跟手拖动由 JS 直接设 style.transition='none'，无过渡可降。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== UX 增强（v92） ===================== */
/* UX#2：信息流位置计数（第 N / 共 M）——底部居中小胶囊；
   swipe 沉浸模式隐藏了左缘进度点，计数即位置指示（不与 tabbar/meta/coach 重叠）；
   grid 模式由 JS 置 hidden。 */
.feed-pos {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b, 0px));
  transform: translateX(-50%);
  z-index: 31; pointer-events: none;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.72);
  background: rgba(15,20,36,0.45); border: 1px solid rgba(255,255,255,0.12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* UX#7：游玩逃生浮层按钮——iframe 之外、高 z-index，游玩态常驻；
   自定义游戏 pointer-lock / 触屏被 iframe 捕获时仍可一键退出 */
.play-exit-fab {
  /* v168：原先 right:12px / top:12px 直接压在导航栏右侧的「头像 + 登录」上（实测重叠 88×24px）→
     改到导航栏正中（logo 在左、头像/登录在右，中间是空的），再加 ≥901px 断点回右侧下方。 */
  position: fixed; left: 50%; transform: translateX(-50%); right: auto;
  top: calc(20px + var(--safe-t, 0px));
  z-index: 90;
  padding: 8px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(15,20,36,0.82); border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.play-exit-fab:hover { background: rgba(19,26,46,0.92); }
.play-exit-fab:active { transform: translateX(-50%) scale(.94); }
.play-exit-fab[hidden] { display: none; }
@media (min-width: 901px) {
  .play-exit-fab { left: auto; right: 16px; transform: none; top: calc(var(--nav-h, 60px) + 16px); }
  .play-exit-fab:active { transform: scale(.94); }
}

/* ===== 手机游玩态：全屏按钮 + 通用虚拟手柄（v158） =====
   根因：西境血雨夜/消消乐等键盘类作品手机上无任何输入手段。
   方案：游玩态浮出虚拟手柄（D-pad + A/B 键），同源 custom iframe 直接派发 keydown/keyup；
   内置 flappy/bounce/catchit 等只需空格/方向键的也统一覆盖。 */
.vch-fs-btn {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h, 75px) + 14px + var(--safe-b, 0px));   /* v168：挪到手柄两簇之间的空档（原 right:12px 正压在右侧操作栏"下载"图标上） */
  z-index: 92;
  width: 46px; height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; cursor: pointer; border: none;
  background: rgba(15,20,36,0.78);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}
.vch-fs-btn:active { transform: translateX(-50%) scale(.92); }
.vch-fs-btn[hidden] { display: none; }

/* v162：手柄由「居中悬浮方块」改为「左下十字键 + 右下 A/B」双簇底部条。
   真机 + 390×780 实测的三处硬伤（2026-09-25）：
   ① 原块 226×261 钉在 bottom:14px，与 #tabbar(57px 高，z70) 重叠 43px → 手柄压在"首页/搜索/消息/我"上；
   ② 居中悬浮正压作品正中（海龟汤汤面文案整段看不见）；
   ③ grid-template-rows 只声明 3 行，A/B 落在第 4 隐式行 → 被压成 ~29px 扁平条。
   改后整条抬到 #tabbar 之上，画面中心完全让给作品。 */
.vch-pad {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tabbar-h, 75px) + 8px + var(--safe-b, 0px));   /* v168：实测 tabbar 高（真机 75px），不再用猜的 64px */
  z-index: 92;
  display: none;
  align-items: flex-end; justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
body.playing-custom .vch-pad, body.is-playing-any .vch-pad { display: flex; }
/* 沉浸全屏游玩时手柄下移留出系统手势区（JS 在 fullscreenchange 里切换 body.vch-fullscreen） */
body.vch-fullscreen .vch-pad { bottom: calc(18px + var(--safe-b, 0px)); }
.vch-pad-cross {
  display: grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 44px 44px 44px;
  gap: 4px; padding: 6px;
  border-radius: 20px;
  background: rgba(7,10,20,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.vch-pad-ab { display: flex; align-items: flex-end; gap: 8px; }
.vch-pad button {
  border: none; cursor: pointer; border-radius: 14px;
  font-size: 17px; color: #F1F5F9; font-weight: 700;
  background: rgba(163,230,53,0.14);
  border: 1px solid rgba(163,230,53,0.35);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; pointer-events: auto;
}
.vch-pad button:active { background: rgba(163,230,53,0.34); transform: scale(.93); }
.vch-pad .vch-pad-key { color: rgba(241,245,249,0.55); font-size: 9.5px; }
.vch-pad-a, .vch-pad-b {
  width: 58px; height: 58px; border-radius: 50%;
  flex-direction: column; line-height: 1.05; font-size: 16px;
  background: rgba(163,230,53,0.2);
}
.vch-pad-up { grid-column: 2; grid-row: 1; flex-direction: column; line-height: 1; }
.vch-pad-left { grid-column: 1; grid-row: 2; }
.vch-pad-right { grid-column: 3; grid-row: 2; }
.vch-pad-down { grid-column: 2; grid-row: 3; }
/* 游玩态不打扰：App 下载条会盖住手柄与 tabbar，游玩期间收起 */
body.is-playing-any .app-install, body.playing-custom .app-install { display: none !important; }
/* v168：PWA「装到桌面」条同理——它 z-index 9999，游玩时会把虚拟手柄 A/B 键整片盖住 */
body.is-playing-any #pwaInstallBar, body.playing-custom #pwaInstallBar { display: none !important; }
/* 桌面端隐藏（仅手机/触屏窄屏展示） */
@media (min-width: 901px) { .vch-pad { display: none !important; } .vch-fs-btn { display: none !important; } }

/* UX#9：toast 内动作按钮（点击后执行并提前关闭） */
.toast { pointer-events: auto; }
.toast-action {
  margin-left: 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #A3E635, #C6F432);
  border: 1px solid rgba(255,255,255,0.25);
  vertical-align: middle;
}
.toast-action:hover { filter: brightness(1.1); }
.toast-action:active { transform: scale(.95); }

/* UX#10：feed 错误态重试按钮（不依赖已隐藏的筛选栏入口） */
.feed-retry {
  display: block; margin: 14px auto 0;
  padding: 8px 24px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #A3E635, #C6F432);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.feed-retry:hover { filter: brightness(1.08); }
.feed-retry:active { transform: scale(.96); }

/* 去代码化：发布弹窗「自己写代码（高级）」折叠入口 */
.pub-adv-toggle { width: 100%; margin: 2px 0 10px; padding: 9px 12px; border-style: dashed; color: var(--text-dim); }
.pub-adv-toggle:hover { color: var(--accent); border-color: var(--accent-soft); background: rgba(163,230,53,0.06); }

/* ===== UX 批量优化（v112）：ask 弹窗 / 离线条 / 新作品 pill / 私信 pending 与分页 ===== */
.ask-mask { z-index: 220; }
.ask-modal { max-width: 320px; width: calc(100vw - 48px); display: flex; flex-direction: column; gap: 12px; }
.ask-title { font-size: 16px; margin-bottom: 0; }
.ask-row { display: flex; gap: 10px; justify-content: flex-end; }
.ask-row .btn-ghost, .ask-row .btn-primary, .ask-row .btn-danger { min-width: 84px; }

.offline-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 12px; font-size: 12.5px; color: #fff;
  background: var(--like); transform: translateY(-100%); transition: transform .25s ease;
  pointer-events: none;
}
.offline-bar.is-show { transform: translateY(0); }
.offline-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: offline-blink 1.2s infinite; }
@keyframes offline-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.new-works-pill {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 210;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--panel-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  animation: pill-in .25s ease;
}
.new-works-pill:hover { border-color: var(--accent); }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.dm-bubble.is-pending { opacity: .55; }
.dm-load-more {
  align-self: center; margin: 10px auto 4px; padding: 6px 14px; cursor: pointer;
  font-size: 12.5px; color: var(--text-dim); background: transparent;
  border: 1px solid var(--border); border-radius: 999px;
}
.dm-load-more:hover { color: var(--text); border-color: var(--accent); }
.dm-load-more:disabled { opacity: .6; cursor: default; }

/* ===== 移动端 UI 修复（v113）：iOS 聚焦缩放 / 触控目标 / 私信全屏贴片 ===== */
/* ① iOS 聚焦自动放大：font-size ≥16px 才能避免 Safari 强制缩放（user-scalable=no 挡不住） */
@media (max-width: 900px) {
  .modal-input, .set-inline .modal-input, .setting-inline .modal-input,
  .sp-input, .tp-row textarea { font-size: 16px; }
  /* ② 小触控目标放大（收藏/合集管理行按钮 30px → 40px，删除键拉开间距） */
  .dlist-act { width: 40px; height: 40px; font-size: 15px; }
  .dlist-act-del { margin-left: 6px; }
  .dlist-group-mg { width: 36px; height: 36px; font-size: 15px; }
  .vm-btn, .fs-btn { min-width: 40px; min-height: 34px; }
}
/* ③ 私信面板手机端改全屏贴片：悬浮小卡在窄屏拥挤且弹键盘易盖住输入框 */
@media (max-width: 560px) {
  .dm-panel {
    top: calc(var(--nav-h, 60px) + var(--safe-t, 0px)); left: 0; right: 0; bottom: 0;
    width: 100%; height: auto; border-radius: 0; border: none;
  }
}

/* ===== v114 安卓 App 下载引导（手机访问网页时推荐独立 App） ===== */
@media (max-width: 900px) {
  .app-install {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 75px) + 12px + var(--safe-b, 0px)); z-index: 205;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 10px 12px; border-radius: 16px;
    background: var(--panel-solid); border: 1px solid var(--border-hi);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    animation: app-rise .25s ease;
  }
  .app-install-ic {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #16203A, #0F1424);
    border: 1px solid var(--border-hi);
  }
  .app-install-tx { flex: 1; min-width: 0; }
  .app-install-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .app-install-s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .app-install-btn {
    flex: none; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
    color: #0E1320; background: var(--accent); text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
  }
  .app-install-btn:active { transform: scale(.96); }
  .app-install-x {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); background: rgba(255, 255, 255, .06);
    border: none; font-size: 16px; line-height: 1; cursor: pointer;
  }
  .app-install-x:active { color: #fff; }
}
@keyframes app-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 横屏矮屏（tabbar 已隐藏）不显示下载卡，避免悬空 */
@media (max-height: 500px) and (max-width: 900px) {
  .app-install { display: none; }
}

/* ===== v116 抽屉内常驻「安卓 App 下载」入口（解决找不到下载位置） ===== */
.drawer-apk {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 8px 10px 6px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; background: rgba(163,230,53,0.08);
  border: 1px solid var(--border);
}
.drawer-apk:hover { border-color: var(--border-hi); background: rgba(163,230,53,0.14); }
.drawer-apk:active { opacity: .85; }
.drawer-apk-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16203A, #0F1424);
  border: 1px solid var(--border-hi);
}
.drawer-apk-tx {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; color: var(--text); font-weight: 600;
}
.drawer-apk-tx em { font-style: normal; font-size: 11px; color: var(--text-dim); font-weight: 400; }
.drawer-apk-go {
  flex: none; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #0E1320; background: var(--accent);
}
.drawer-logout { margin-top: 4px; }

/* ===== v119 SW 更新提示条 ===== */
.sw-update-bar {
  position: fixed; bottom: calc(var(--tabbar-h, 56px) + 8px); left: 50%;
  transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(163,230,53,0.95), rgba(198,244,50,0.95));
  color: #0E1320; font-weight: 600; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  animation: sw-rise 0.4s cubic-bezier(.2,.7,.3,1);
  max-width: calc(100% - 32px);
}
.sw-update-btn {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: #0E1320; color: #C6F432; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.sw-update-btn:hover { opacity: 0.9; }
.sw-update-x {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: none; color: #0E1320;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0.7;
}
.sw-update-x:hover { opacity: 1; }
@keyframes sw-rise {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-height: 500px) and (max-width: 900px) {
  .sw-update-bar { bottom: 8px; }
}

/* ===================== 二创激励（接龙示能） ===================== */
/* feed 卡（swipe）改造数入口 */
.meta-remix-ct { color: var(--accent, #A3E635); font-weight: 600; margin-top: 8px; }
/* grid 卡改造数入口 */
.g-remixct {
  display: inline-block; margin: 6px 0 2px; font-size: 11.5px; font-weight: 700;
  color: var(--accent, #A3E635);
  background: rgba(163,230,53,0.14); border: 1px solid rgba(163,230,53,0.32);
  padding: 3px 9px; border-radius: 999px;
}
/* 接龙热角标（克制：仅 remixCount>=3） */
.feed-hot-badge {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
  color: #fff; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,45,111,0.78); border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none; /* 展示性角标，不拦截卡片点击 */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* =========================================================
   手机端排版加固（v124）—— 受众以手机端为主，用户反馈"手机端排版乱"
   ① 沉浸模式 .tabbar{display:none!important} 特异性高于 900px 断点的
      .tabbar{display:flex}，导致手机端「首页/搜索/消息/我」四大固定入口全部消失，
      只能靠顶部小图标够 —— 手机端是主要受众，导航可达性优先于纯 TikTok 沉浸感
   ② .modal 无 max-height / overflow：作者主页、榜单、收藏分组、合集、看板等
      长列表弹窗内容超出手机视口被裁死、无法滚动
   ③ .notif-panel top 硬编码 calc(56px + 8px)，手机端 --nav-h 已加高到 68px，
      通知面板顶部压在导航条下面（私信面板 v116 已改全屏贴片，通知面板漏改）
   ④ 双列瀑布流：小屏列宽不足时封面强制 max-width 兜底，防溢出
   ========================================================= */
@media (max-width: 900px) {
  /* ① 手机端恢复底部导航（沉浸模式不再隐藏 tabbar） */
  body.swipe-immersive .tabbar { display: flex !important; }
  body.swipe-immersive { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body.swipe-immersive .meta { bottom: calc(74px + var(--safe-b)); }
  body.swipe-immersive .feed-pos { bottom: calc(146px + var(--safe-b, 0px)); }

  /* ② 长内容弹窗：mask 顶对齐 + 边距，modal 从视口顶部开始，
     关闭按钮始终在可视区；内容超出时在 modal 内滚动 */
  .modal-mask { padding: 12px; align-items: flex-start; }
  .modal-mask.is-immersive { padding: 0; align-items: stretch; }
  .modal:not(.modal-publish) {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    max-height: calc(var(--vvh, 100dvh) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  /* ③ 通知面板避让手机端加高的导航（私信面板已是全屏贴片，此处只补通知面板） */
  .notif-panel {
    top: calc(var(--nav-h, 60px) + var(--safe-t, 0px) + 10px);
    right: 10px;
    left: 10px;
    width: auto;
  }

  /* ④ 双列瀑布流小屏兜底 */
  .feed.grid .g-col { min-width: 0; }
  .feed.grid .g-cover { max-width: 100%; }

  /* ⑤ 长内容卡（has-tall-demo）移动端 meta 底边回升：14px 是桌面全屏（无底部导航）的
     设计值，手机端被 62px tabbar 盖住（"关注"按钮半截被遮）→ 回升到 74px 让出 tabbar 区
     （特异性与 1824 行规则相等，源码靠后覆盖，桌面端不受影响） */
  body.swipe-immersive .card.has-tall-demo .meta { bottom: calc(74px + var(--safe-b)); }
  /* ⑥ 手机端 fit 容器底边上移至 tabbar 之上：bottom 定位让出 62px+安全区，
     （不依赖 nav/feedbar 变量实测值，比 max-height 公式更稳） */
  body.swipe-immersive .card.has-tall-demo .preview-demo.fit-overflow {
    bottom: calc(62px + var(--safe-b, 0px));
  }
}

/* =========================================================
   短横屏修正（v125）—— 手机/折叠屏横置时高度 ≤500px
   背景：上面的 900px 块把 body.swipe-immersive .tabbar 强制设为
   display:flex !important，而 (max-height:500px) and (max-width:900px) 块里
   .tabbar{display:none} 特异性 0-1-0、无 !important，压不住。
   结果短横屏沉浸模式下 tabbar 被强行显示，吃掉大半高度，meta 还停在 74px
   —— 与原设计（短横屏隐藏 tabbar 腾高度、meta 贴底）完全相反。
   此处收回短横屏的 tabbar，并把 meta / feed-pos / 底部留白一并复位。
   ========================================================= */
@media (max-height: 500px) and (max-width: 900px) {
  .tabbar,
  body.swipe-immersive .tabbar { display: none !important; }
  body.swipe-immersive { padding-bottom: 0; }
  body.swipe-immersive .meta { bottom: calc(10px + var(--safe-b)); }
  body.swipe-immersive .feed-pos { bottom: calc(24px + var(--safe-b, 0px)); }
}

/* =========================================================
   列表项进入动画（评论/通知/私信/榜单）：淡入上浮 + 相邻兄弟 stagger
   纯 CSS 实现，零 JS 成本（UI 全面升级 2026-09-23）
   ========================================================= */
@keyframes listItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmt-item, .notif-item, .dm-item, .board-row, .audit-row, .search-result {
  animation: listItemIn .3s cubic-bezier(.2,.9,.3,1) both;
}
/* stagger：相邻兄弟逐项延迟（最多 8 项，避免长列表感知延迟） */
.cmt-item:nth-child(2), .notif-item:nth-child(2), .dm-item:nth-child(2), .board-row:nth-child(2) { animation-delay: .03s; }
.cmt-item:nth-child(3), .notif-item:nth-child(3), .dm-item:nth-child(3), .board-row:nth-child(3) { animation-delay: .06s; }
.cmt-item:nth-child(4), .notif-item:nth-child(4), .dm-item:nth-child(4), .board-row:nth-child(4) { animation-delay: .09s; }
.cmt-item:nth-child(5), .notif-item:nth-child(5), .dm-item:nth-child(5), .board-row:nth-child(5) { animation-delay: .12s; }
.cmt-item:nth-child(6), .notif-item:nth-child(6), .dm-item:nth-child(6), .board-row:nth-child(6) { animation-delay: .15s; }
.cmt-item:nth-child(7), .notif-item:nth-child(7), .dm-item:nth-child(7), .board-row:nth-child(7) { animation-delay: .18s; }
.cmt-item:nth-child(8), .notif-item:nth-child(8), .dm-item:nth-child(8), .board-row:nth-child(8) { animation-delay: .21s; }
/* 列表重渲染（清空重建）时不反复闪：仅在首次挂载动画。配合容器重建天然满足。 */

/* 模态遮罩层次：轻模糊 + 提亮（浮层与背景分离，UX 2026-09-23） */
.modal-mask:not([hidden]), .drawer-mask:not([hidden]) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* =========================================================================
   v169 手机端深度打磨（2026-09-25 · 实测坐标驱动）
   ① 示例模式提示条压住频道栏「全部/关注/新作」(重叠 195×40) → 下移到频道栏之下，并可点重试
   ② 详情页底部操作栏被底部导航压住（padding-bottom 40px < tabbar 75px）→ 让出 tabbar 高度
   ③ 游玩态频道栏白占 54px → 收起，把纵向空间让给作品
   ④ 虚拟手柄盖住作品画面 25.6%（380×131px）→ 支持一键收起
   ⑤ 手机端触控目标过小（seg 29h / vm·fs 34h / follow 28h / login 28h）→ 放大到可用尺寸
   ========================================================================= */

/* ① 示例模式提示条：下移到频道栏之下，不再压住「全部/关注/新作」 */
.demo-bar {
  top: calc(var(--nav-h, 60px) + var(--safe-t, 0px) + var(--feedbar-h, 54px) + 10px);
}

/* ② 详情页滚动区底部留出底部导航高度 */
.detail-scroll { padding: 56px 18px calc(var(--tabbar-h, 75px) + 30px + var(--safe-b, 0px)); }

/* ③ 游玩态收起频道栏，作品区上提（实测可多让出 ~98px 纵向空间） */
body.swipe-immersive.is-playing-any .feed-bar,
body.swipe-immersive.playing-custom .feed-bar { display: none !important; }
body.swipe-immersive.is-playing-any .card.is-playing .preview { top: calc(var(--nav-h, 60px) + var(--safe-t, 0px) + 4px); }

/* ④ 手柄收起/展开开关 */
.vch-pad-toggle {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h, 75px) + 8px + 158px + var(--safe-b, 0px));
  z-index: 93; height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #E7ECFF; cursor: pointer;
  display: none; align-items: center; gap: 5px;
  background: rgba(15,20,36,0.74); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform .12s ease, background .15s ease;
}
.vch-pad-toggle:active { transform: translateX(-50%) scale(.94); }
body.is-playing-any .vch-pad-toggle, body.playing-custom .vch-pad-toggle { display: flex; }
body.pad-collapsed .vch-pad { display: none !important; }
body.pad-collapsed .vch-pad-toggle { bottom: calc(var(--tabbar-h, 75px) + 12px + var(--safe-b, 0px)); }
body.vch-fullscreen .vch-pad-toggle { bottom: calc(18px + 158px + var(--safe-b, 0px)); }
body.vch-fullscreen.pad-collapsed .vch-pad-toggle { bottom: calc(18px + var(--safe-b, 0px)); }

/* ④b 点按类小游戏（飞鸟/接球/弹跳）：只需要一个「跳跃/确认」大键，十字键纯挡画面 */
body[data-pad-mode="simple"] .vch-pad-cross { display: none; }
body[data-pad-mode="simple"] .vch-pad-ab { margin-left: auto; }
body[data-pad-mode="simple"] .vch-pad-a { width: 78px; height: 78px; font-size: 18px; }
/* ④c 手柄整体降噪：平时半透明让作品透出来，按下时提到全亮 */
body.is-playing-any .vch-pad, body.playing-custom .vch-pad { opacity: .88; transition: opacity .18s ease; }
body.is-playing-any .vch-pad:active, body.playing-custom .vch-pad:active,
body.is-playing-any .vch-pad:focus-within, body.playing-custom .vch-pad:focus-within { opacity: 1; }

/* ⑥ 矮屏 / 横屏：手柄按比例缩小——横屏 844×390 实测手柄 154px 高，占屏 39%，预览区只剩 192px */
@media (max-height: 660px) {
  .vch-pad-cross { grid-template-columns: 36px 36px 36px; grid-template-rows: 36px 36px 36px; gap: 3px; padding: 5px; }
  .vch-pad-a, .vch-pad-b { width: 50px; height: 50px; font-size: 14px; }
  .vch-pad-toggle { bottom: calc(var(--tabbar-h, 75px) + 8px + 124px + var(--safe-b, 0px)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .vch-pad { padding: 0 10px; }
  .vch-pad-cross { grid-template-columns: 32px 32px 32px; grid-template-rows: 32px 32px 32px; gap: 3px; padding: 4px; }
  .vch-pad-a, .vch-pad-b { width: 44px; height: 44px; font-size: 13px; }
  .vch-pad .vch-pad-key { display: none; }
  .vch-pad-toggle { bottom: calc(var(--tabbar-h, 75px) + 6px + 102px + var(--safe-b, 0px)); }
  body.pad-collapsed .vch-pad-toggle { bottom: calc(var(--tabbar-h, 75px) + 10px + var(--safe-b, 0px)); }
}

/* ⑤ 手机端触控目标放大 */
@media (max-width: 900px) {
  .seg-btn { padding: 8px 15px; min-height: 34px; }
  .shuffle-btn { padding: 8px 14px; min-height: 34px; }
  .vm-btn { width: 38px; height: 34px; }
  .fs-btn { min-width: 38px; min-height: 34px; }
  .btn-follow { padding: 7px 14px; min-height: 32px; }
  .btn-login { padding: 9px 20px; min-height: 34px; }
}