/* dfy · 多页面共用补充样式（依赖 styles.css） */

/* 顶部导航：头像入口替代原来的账号信息栏 */
.nav-user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-avatar {
  position: relative; display: block; line-height: 0;
  border-radius: 50%; transition: transform .18s, box-shadow .18s;
}
.nav-avatar:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 20px rgba(91,140,255,.35); }
.nav-avatar .nav-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  background: var(--ok); border: 2px solid #07080f; border-radius: 50%;
}
.avatar-img { border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--wa-160); }
.avatar-fallback {
  display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--cyan), #2fd6a0); text-transform: uppercase;
}
/* 游客状态：右上角只放一个「登录」，不摆头像占位 */
.nav-login {
  display: inline-flex; align-items: center; padding: 8px 20px; font-size: 13.5px; font-weight: 700;
  color: var(--fg-strong) !important; text-decoration: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 6px 20px rgba(91,140,255,.32);
  transition: transform .18s, filter .2s, box-shadow .2s;
}
.nav-login:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(91,140,255,.45); }

/* 面包屑 / 返回 */
.backbar {
  max-width: 1480px; margin: 18px auto 0; padding: 0 clamp(16px, 4vw, 48px);
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--dim);
}
.backbar a { color: var(--violet); text-decoration: none; }
.backbar a:hover { text-decoration: underline; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: var(--wa-50); border: 1px solid var(--wa-100);
  border-radius: 999px; color: var(--text-sub) !important; font-size: 13px;
  transition: all .18s; text-decoration: none !important;
}
.back-link:hover { background: var(--wa-100); border-color: var(--cyan-a500); }

/* 详情页 */
.detail-wrap { max-width: 1180px; margin: 22px auto 0; padding: 0 clamp(16px, 4vw, 48px) 60px; }
.detail-hero {
  position: relative; border-radius: 20px; overflow: hidden;
  background: #080b14 center/cover no-repeat; min-height: 200px;
  /* 不要 1px 描边：白色半透明边压在模糊背景上会在顶边形成一条亮线（实测亮度 91 vs 内部 32） */
  border: 0;
}
/* 虚化层：图要从 .detail-hero 自身继承过来（detail.js 设的是它的 background-image）。
   inset:0 + scale(1.5) 在卡内放大盖实，否则模糊收缩后边缘会露出没模糊的原图（彩边） */
.detail-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: inherit; background-size: cover; background-position: center;
  filter: blur(30px) grayscale(.85) brightness(.42);
  transform: scale(1.5);
  transform-origin: center;
}
.detail-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,10,19,.3) 0%, rgba(8,10,19,.86) 62%, #080a13 100%);
}
/* 内容层要压在虚化和渐变之上 */
.detail-hero > * { position: relative; z-index: 2; }
.detail-top {
  position: relative; z-index: 2; display: flex; gap: 24px; align-items: flex-end;
  padding: 26px clamp(16px, 3vw, 30px); margin-top: -70px;
}
.detail-top > img {
  width: 172px; aspect-ratio: 2/3; object-fit: cover; border-radius: 14px; flex: 0 0 auto;
  border: 1px solid var(--wa-140); background: var(--bg-deep);
  box-shadow: 0 20px 48px rgba(0,0,0,.7);
}
.detail-info { flex: 1 1 320px; min-width: 0; padding-bottom: 6px; }
.detail-info h1 { margin: 0 0 8px; font-size: clamp(21px, 3.4vw, 30px); line-height: 1.25; }
.detail-info .alias { color: var(--dim); font-size: 13.5px; margin: 0 0 12px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-solid, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
  border-radius: 12px; font-size: 14.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: all .18s; touch-action: manipulation;
}
.btn-solid {
  color: var(--fg-strong); background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 10px 28px rgba(91,140,255,.34);
}
.btn-solid:hover { transform: translateY(-2px); filter: brightness(1.09); }
.btn-ghost {
  color: #dbe6ff; background: var(--wa-60); border-color: var(--wa-140);
}
.btn-ghost:hover { background: var(--wa-120); }
.btn-ghost.on { color: var(--gold); border-color: rgba(255,215,107,.55); background: rgba(255,215,107,.1); }

.detail-body { margin-top: 26px; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.section-title {
  font-size: 15.5px; font-weight: 700; color: #e2e8ff; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-title::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), #2fd6a0);
}
.plot { color: #b9c1e0; font-size: 14.5px; line-height: 1.8; white-space: pre-wrap; }
/* ⚠️ 收起态必须把 white-space 改回 normal：
   `-webkit-line-clamp` 只在正常换行下生效，而 `.plot` 为了保留简介里的换行设了 `pre-wrap` ——
   两者一撞，clamp 直接失效，**简介根本没被截断**，于是"展开全部"点了看不出任何变化
   （主人反馈的就是这个）。展开态不需要截断，用回 pre-wrap 保住换行。 */
.plot.clamp {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.more-toggle {
  background: none; border: 0; color: var(--violet); font-family: inherit; font-size: 13px;
  cursor: pointer; padding: 8px 0 0;
}
.ep-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.ep-item {
  display: block; padding: 11px 12px; border-radius: 10px; text-align: center;
  background: var(--wa-45); border: 1px solid var(--wa-90);
  color: #dfe5ff; font-size: 13px; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; transition: all .16s;
}
.ep-item:hover { background: rgba(124,199,255,.16); border-color: var(--cyan-a500); transform: translateY(-1px); }
.ep-item.playing { border-color: rgba(47,214,160,.6); background: rgba(47,214,160,.12); color: #b8f5dd; }

/* 播放页 */
.play-wrap { max-width: 1180px; margin: 20px auto 0; padding: 0 clamp(16px, 4vw, 48px) 60px; }
.player-shell {
  border: 1px solid var(--wa-100); border-radius: 16px; overflow: hidden;
  background: #05060c; box-shadow: 0 24px 60px var(--shade-a550);
}
.player-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--wa-80);
  font-size: 13px; color: var(--dim);
}
.player-bar .now { flex: 1 1 200px; min-width: 0; color: #dfe5ff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar .ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 手机端的具体规则在下方 `@media (max-width: 620px)` 的"播放页"那一段里
   （单行 + 按钮横滑），不要在这里再写一遍 —— 同一个选择器写两处必然互相覆盖，
   2026-10-08 我就在这里吃过一次亏：新加的规则被下面那段盖掉，排查了半天。 */
.pbtn {
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  background: var(--wa-60); border: 1px solid var(--wa-130); color: var(--text-sub);
  transition: all .16s; touch-action: manipulation; white-space: nowrap;
}
/* 按下去有反馈，不然点了像没反应 */
.pbtn:active { transform: scale(.96); }

.pbtn:hover { background: var(--wa-130); }
.pbtn.on { color: var(--gold); border-color: rgba(255,215,107,.5); }
.pbtn.icon { padding: 7px 11px; }
.video-stage { position: relative; aspect-ratio: 16/9; background: var(--shade); }
.video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--shade); }

/* ---- 弹幕（2026-10-08，改用 weizhenye/Danmaku 引擎）----
   canvas 由库自己插进 .video-stage，所以这里不用管它怎么建，只需要：
   ① 保证它不挡鼠标（库通常自己设了 pointer-events:none，这里再兜一层保险）
   ② 它得在视频上面、在控制条下面（z-index 见下） */
.video-stage canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* 弹幕控制条：平时隐形，鼠标移到画面上 / 触屏点一下 / 聚焦输入框时才浮出来。

   ⚠️ `bottom` 要**避开自建的播放控制条**（.vp-bar，约 48px 高），
      否则会像主人说的那样"弹幕跟进度条重合"。（原来写 52px 是撞原生控件，现在是撞自建的。） */
.dm-bar {
  position: absolute; left: 0; right: 0; bottom: 56px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  opacity: 0; transition: opacity .18s ease;
  z-index: 4;
}
.video-stage:hover .dm-bar,
.dm-bar:focus-within { opacity: 1; }
/* 触屏没有 hover，所以给一条"点一下画面"也能露出来的路径（见 play.js 的 click 监听） */
.video-stage.dm-show .dm-bar { opacity: 1; }
.dm-btn {
  flex: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 7px;
  padding: 6px 10px; font-size: 12.5px; line-height: 1;
  font-family: inherit;
}
.dm-btn:hover { background: rgba(255,255,255,.24); }
.dm-btn.off { color: #ff9aa2; border-color: rgba(255,154,162,.45); }
.dm-send { background: var(--cyan); color: #05121a; font-weight: 600; border-color: transparent; }
.dm-send:hover { filter: brightness(1.08); }
.dm-input {
  flex: 1; min-width: 0;
  background: rgba(8,10,20,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 7px;
  padding: 7px 11px; font-size: 13px; font-family: inherit;
}
.dm-input::placeholder { color: rgba(255,255,255,.45); }
.dm-input:focus { border-color: var(--cyan); }   /* 原 `outline: none` 已删：键盘焦点要有可见描边（WCAG 2.4.7） */

/* ---- 进度条悬停的**画面预览**（2026-10-08）----
   由 play.js 动态创建、插在 ArtPlayer 的进度条容器里（库没提供这个能力：
   它自带的 thumbnails 要求雪碧图，我们没有源视频生成不了，原因见 play.js 的说明）。

   ⚠️ 位置是 `bottom: calc(100% + 34px)` —— 也就是**高于时间气泡**。
      时间气泡（.art-progress-tip）是 ArtPlayer 放在进度条正上方的，
      如果预览也贴在那儿，就会像主人说的那样"几分几秒和画面叠在一起，根本看不清"。 */
.art-preview {
  position: absolute;
  bottom: calc(100% + 34px);
  left: 0;
  width: 170px;
  height: 96px;
  margin-left: -85px;              /* 让 left 落在浮层**中心**（JS 写的是中心位置） */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 90;
}
.art-preview.on { opacity: 1; }
.art-preview video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---- ArtPlayer 与本主题的几处接缝（库默认是浅色，站点是深色）---- */
/* ⚠️ 拖动进度条时**不要让页面跟着滚**（主人 2026-10-08 反馈"拖动进度条也会让屏幕跟着一起动"）。
   原因：手机上拖进度条是一串 touchmove，浏览器默认会把它当成"滚动页面"，
   于是手指一动整页就上下跑、进度条还追不上手指。
   正确做法就是 `touch-action: none`：告诉浏览器"这块区域的手势别拿去滚页面，交给我"。
   这是移动端可拖拽控件的标准写法（不需要 JS 拦截 touchmove）。 */
.art-video-player .art-progress,
.art-video-player .art-control-progress,
.art-video-player .art-control-progress-inner {
  touch-action: none;
}
/* 进度条热区做大一点：手机上 4px 高的线根本点不准（库默认只有线本身的高度） */
.art-video-player .art-control-progress-inner { min-height: 14px; }

/* 弹幕输入框：库默认是一整条浅色输入框，跟深色播放器放一起很突兀 */
.art-video-player .art-danmuku-emitter input {
  background: rgba(8,10,20,.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px;
}
/* 弹幕面板（点开发射器右侧的设置按钮会出来）：深色底 + 白字 */
.art-video-player .art-danmuku-setting,
.art-video-player .art-danmuku-setting-panel {
  background: rgba(10,12,22,.94);
  color: #e8eeff;
  border-color: rgba(255,255,255,.16);
}
/* 热度图：跟主题色一致（默认是白色，和进度条挤在一起看不出来） */
.art-video-player .art-danmuku-heatmap rect { fill: rgba(127,227,255,.55); }

/* ---- 手机端的弹幕发射器 ----
   窄屏时插件会把输入框从控制条**挪到播放器底部**（play.js 里设了 `width: 500`），
   这是它的设计（免得挤爆控制条）。但它默认占一整个条，手机上显得很占地方，
   而且和播放器下沿贴得太近。这里把它压紧凑一点，并和上面的画面拉开距离。 */
@media (max-width: 620px) {
  .art-video-player .art-danmuku-emitter {
    margin: 0; padding: 4px 6px;
    background: rgba(6,8,16,.92);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .art-video-player .art-danmuku-emitter input { font-size: 13px; padding: 6px 9px; }
  .art-video-player .art-danmuku-emitter button { font-size: 13px; padding: 6px 12px; }
  /* ⚠️ 控制条要**压在发射器上面**。
     手机上插件把发射器停在播放器底部，而它的层级比控制条高 ——
     结果控制条被整条盖住，播放/全屏那些按钮点不到（2026-10-08 截图为证）。
     控制条本来就是"点画面才出现"的临时层，给它更高的 z-index 是对的。 */
  .art-video-player .art-bottom { z-index: 80 !important; }
  .art-video-player .art-controls { z-index: 81 !important; }
  /* 发射器别贴着画面下沿，留一点呼吸 */
  .art-video-player .art-danmuku { z-index: 20; }
}

/* 自建的播放控制条和弹幕条样式已删除（2026-10-08）。
   原因：播放器改用 ArtPlayer（自带控制条 + 弹幕输入框 + 两个全屏按钮），
   那套自己写的 UI（.vp-bar / .dm-bar / .vp-track / .art-preview 之外的）全都不再需要。
   教训见 PROMPT.md 第 1.1.1 条：通用功能先搜业界做法，别自己造。 */
.video-note {
  padding: 10px 15px; font-size: 12.5px; color: #8f9ac0;
  border-top: 1px solid var(--wa-70); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

/* 评论 */
.cmt-box { margin-top: 26px; }
.cmt-form {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--wa-40); border: 1px solid var(--wa-90);
  border-radius: 14px; padding: 14px;
}
.cmt-form textarea {
  flex: 1; min-height: 68px; resize: vertical; padding: 11px 13px; font-size: 14px;
  font-family: inherit; color: var(--fg); background: rgba(0,0,0,.25);
  border: 1px solid var(--wa-100); border-radius: 10px; line-height: 1.6;   /* 原 `outline: none` 已删 */
}
.cmt-form textarea:focus { border-color: var(--cyan-a600); }
.cmt-list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cmt {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 13px;
  background: var(--wa-35); border: 1px solid rgba(255,255,255,.075);
}
.cmt-main { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.cmt-head b { color: #e4e9ff; font-size: 13.5px; }
.cmt-head .badge {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid currentColor;
}
.cmt-head .badge.owner { color: var(--gold); }
.cmt-head .badge.admin { color: var(--cyan); }
.cmt-head .ep { color: #9aa5cc; }
.cmt-text { color: #ccd4ee; font-size: 14px; line-height: 1.72; margin: 7px 0 0; word-break: break-word; white-space: pre-wrap; }
.cmt-ops { display: flex; gap: 14px; margin-top: 9px; font-size: 12.5px; }
.cmt-ops button {
  background: none; border: 0; color: #8f9ac0; font-family: inherit; font-size: 12.5px;
  cursor: pointer; padding: 0; transition: color .16s;
}
.cmt-ops button:hover { color: #b9c6ff; }
.cmt-ops button.liked { color: #ff7c9c; }
.cmt-ops button.danger:hover { color: var(--danger); }
/* 个人主页「去这一集」：新开一页跳到那一集 */
.cmt-ops .go-ep {
  color: var(--violet); text-decoration: none; font-size: 12.5px; transition: color .16s;
}
.cmt-ops .go-ep:hover { color: #b9c6ff; text-decoration: underline; }
/* 从「去这一集」跳过来时，自己那条评论亮一下，一眼能看到 */
.cmt-focus {
  border-color: rgba(124,199,255,.75) !important;
  box-shadow: 0 0 0 3px rgba(91,140,255,.18), 0 10px 30px rgba(91,140,255,.18);
  animation: cmtFlash 1.5s ease-out 2;
}
@keyframes cmtFlash {
  from { background: rgba(91,140,255,.2); }
  to { background: var(--wa-35); }
}
.cmt-empty { color: var(--dim); font-size: 13.5px; padding: 26px 0; text-align: center; }

/* 个人中心 */
.me-wrap { max-width: 1180px; margin: 22px auto 0; padding: 0 clamp(16px, 4vw, 48px) 60px; }
.me-card {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(91,140,255,.11), rgba(47,214,160,.07));
  border: 1px solid var(--cyan-a220); border-radius: 20px; padding: 26px;
}
.me-avatar-box { position: relative; flex: 0 0 auto; }
.me-avatar-box .avatar-img, .me-avatar-box .avatar-fallback { width: 92px !important; height: 92px !important; font-size: 38px !important; }
.me-avatar-edit {
  position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 14px;
  background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--fg-strong);
  border: 2px solid #0a0d18; transition: transform .16s;
}
.me-avatar-edit:hover { transform: scale(1.1); }
.me-info { flex: 1 1 260px; min-width: 0; }
.me-info h1 { margin: 0 0 6px; font-size: 24px; }
.me-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.me-tags span {
  font-size: 11.5px; padding: 3px 10px; border-radius: 7px;
  background: var(--wa-70); border: 1px solid var(--wa-120); color: var(--text-sub);
}
.me-tags span.owner { color: var(--gold); border-color: rgba(255,215,107,.4); }
.me-tags span.admin { color: var(--cyan); border-color: var(--cyan-a400); }
.me-stats { display: flex; gap: 26px; margin-top: 12px; }
.me-stats div { text-align: center; }
.me-stats b { display: block; font-size: 21px; color: #e8eeff; }
.me-stats span { font-size: 12px; color: var(--dim); }
.me-tabs { display: flex; gap: 9px; margin: 26px 0 18px; flex-wrap: wrap; }
.me-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.me-item {
  display: flex; gap: 12px; align-items: center; padding: 11px; border-radius: 13px;
  background: var(--wa-40); border: 1px solid var(--wa-80);
  text-decoration: none; color: inherit; position: relative; transition: all .16s;
}
.me-item:hover { background: rgba(255,255,255,.075); border-color: var(--cyan-a400); transform: translateY(-2px); }
.me-item img.poster { width: 56px; height: 80px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--bg-deep); }
.me-item .t { flex: 1; min-width: 0; }
.me-item .t b { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.me-item .t span { font-size: 11.5px; color: var(--dim); }
.me-item .prog {
  position: absolute; left: 11px; right: 11px; bottom: 7px; height: 3px; border-radius: 2px;
  background: var(--wa-120); overflow: hidden;
}
.me-item .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #2fd6a0); }
.me-empty { color: var(--dim); font-size: 13.5px; padding: 40px 0; text-align: center; grid-column: 1/-1; }
.me-sec { margin-bottom: 34px; }
.me-sec h2 { font-size: 15.5px; margin: 0 0 14px; color: #e2e8ff; display: flex; align-items: center; gap: 10px; }
.me-sec h2::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: linear-gradient(180deg,var(--cyan),#2fd6a0); }

/* 头像选择面板 */
.avatar-picker { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.avatar-preset {
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--ink);
  transition: transform .16s, border-color .16s;
}
.avatar-preset:hover { transform: scale(1.08); border-color: rgba(255,255,255,.4); }
.avatar-preset.on { border-color: var(--ok); }

/* 提示条 */
.toast-box {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  padding: 11px 20px; border-radius: 999px; font-size: 13.5px; color: #eef1ff;
  background: rgba(18,22,40,.95); border: 1px solid var(--wa-140);
  backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px);
  transition: all .26s;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok { border-color: rgba(47,214,160,.5); color: #b8f5dd; }
.toast.err { border-color: rgba(255,120,120,.5); color: #ffc4c4; }

/* 选择线路 */
.line-picker { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.line-btn {
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-family: inherit; cursor: pointer;
  background: var(--wa-50); border: 1px solid rgba(255,255,255,.11); color: var(--text-sub);
  transition: all .16s;
}
.line-btn:hover { border-color: var(--cyan-a500); }
.line-btn.on { background: linear-gradient(135deg, rgba(91,140,255,.9), rgba(176,107,255,.85)); color: var(--fg-strong); border-color: transparent; }

@media (max-width: 620px) {
  .detail-top { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: -40px; }
  .detail-top > img { width: 118px; }
  .detail-hero { min-height: 130px; }
  .video-stage { aspect-ratio: auto; height: 38vh; min-height: 180px; }
  .me-avatar-box .avatar-img, .me-avatar-box .avatar-fallback { width: 72px !important; height: 72px !important; font-size: 30px !important; }
  .me-card { padding: 20px 18px; gap: 16px; }
  .me-stats { gap: 18px; }
  .cmt-form { flex-direction: column; }
  .me-grid { grid-template-columns: 1fr; }
  .ep-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ---------- 手机端：播放页和列表页的手指点按体验 ---------- */
@media (max-width: 620px) {
  .play-wrap { padding: 0 13px 44px; margin-top: 14px; }

  /* 控制条：**单行**，标题可以让位、按钮横滑。
     原来这里是"标题独占一行 + 按钮 4 列网格"。触摸友好（40px 高）这点是对的、保留，
     但 5 个按钮配 4 列会让**第二行只剩一个**，再加上标题那行，整条从 ~44px 涨到 **131px**
     （2026-10-08 实测），白占掉半屏 —— 主人反馈的"手机端播放器都挤一起了"。
     改成单行 + 按钮横向滚动（YouTube / B站 移动版都是这个做法：
     比换行省地方，也比藏进"更多"菜单少一次点击）。 */
  .player-bar { flex-wrap: nowrap; padding: 9px 11px; gap: 9px; }
  .player-bar .now { flex: 0 1 auto; max-width: 40%; font-size: 13px; }
  .player-bar .ops {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: nowrap; width: auto;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  }
  .player-bar .ops::-webkit-scrollbar { display: none; }
  /* 触摸友好这点**保留**：40px 高、手指点得中 */
  .pbtn { flex: 0 0 auto; padding: 10px 12px; font-size: 12.5px; text-align: center; min-height: 40px; }
  .pbtn.icon { padding: 10px 12px; }
  /* 收藏在手机上要显眼，不然混在一排灰按钮里注意不到（主人说"没有收藏按钮"多半就是这个） */
  .player-bar #btnFav { color: var(--gold); border-color: rgba(255,215,107,.42); }
  .player-bar #btnFav.on { background: rgba(255,215,107,.16); }

  /* 线路切换 */
  .line-picker { gap: 8px; }
  .line-btn { padding: 9px 15px; font-size: 13px; }

  /* 选集：手机上小格子，一屏能看到更多集 */
  .ep-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
  .ep-item { padding: 10px 6px; font-size: 12.5px; min-height: 40px; display: grid; place-items: center; }
  .ep-item:hover { transform: none; }          /* 触摸设备没有 hover */

  /* 评论：正文可读性优先，操作项点得着 */
  .cmt { padding: 12px 13px; gap: 10px; }
  .cmt-text { font-size: 13.5px; line-height: 1.7; }
  .cmt-ops { gap: 16px; }
  .cmt-ops button, .cmt-ops .go-ep { font-size: 13px; padding: 4px 0; }
  .cmt-form { padding: 12px; gap: 10px; }
  .cmt-form textarea { min-height: 76px; font-size: 15px; }
  .cmt-form .btn-solid { width: 100%; padding: 12px; }

  /* 列表条目 */
  .me-item { padding: 11px 12px; }
  .me-item .t b { font-size: 13.5px; }
}


/* ---------- 详情页「类似番剧」（单行横向滚动） ---------- */
.similar-sec { margin-top: 26px; }
.similar-row {
  margin-top: 12px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(112px, 11.5vw, 142px);
  gap: 13px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-a500) var(--wa-45);
}
/* 滚动条别用系统默认那条灰杠 */
.similar-row::-webkit-scrollbar { height: 8px; }
.similar-row::-webkit-scrollbar-track { background: var(--wa-45); border-radius: 999px; margin: 0 18px; }
.similar-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,199,255,.75), rgba(47,214,160,.7));
  border: 2px solid transparent; background-clip: padding-box;
}
.similar-row::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(124,199,255,1), rgba(47,214,160,1)); background-clip: padding-box; }

.sim-card {
  display: block; text-decoration: none; color: inherit; min-width: 0;
  scroll-snap-align: start;
  animation: cardIn .4s cubic-bezier(.2,.75,.3,1) both;
}
.sim-thumb {
  position: relative; aspect-ratio: 2/3; border-radius: 11px; overflow: hidden;
  background: var(--bg-deep) center/cover no-repeat;
  border: 1px solid var(--wa-80);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
}
.sim-card:hover .sim-thumb {
  transform: translateY(-4px); border-color: var(--acc-a550);
  box-shadow: 0 14px 30px var(--shade-a550);
}
.sim-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.sim-thumb img.img-ready { opacity: 1; }
.sim-card:hover .sim-thumb img { transform: scale(1.05); }
.sim-thumb.noimg::after {
  content: '🐟'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; opacity: .25;
}
.sim-thumb .noposter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; opacity: .3; }
.sim-badge {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, var(--ok-soft), #2fd6a0);
}
.sim-name {
  margin-top: 7px; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: #e7ecff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; transition: color .18s;
}
.sim-card:hover .sim-name { color: #9dc0ff; }
/* 类型 / 国家 / 年份 / 评分 这几个标签，看得出是按什么推的 */
.sim-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.sim-tags span {
  padding: 1px 6px; border-radius: 5px; font-size: 10px; line-height: 1.6;
  color: #9aa6cc; background: var(--wa-60); border: 1px solid var(--wa-80);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .similar-row {
    grid-auto-columns: 104px; gap: 9px; padding-bottom: 6px;
    scrollbar-width: none;           /* 手机用手指滑，滚动条没用 */
  }
  .similar-row::-webkit-scrollbar { display: none; }
  .sim-name { font-size: 11.5px; min-height: 2.4em; }
  .sim-thumb { border-radius: 9px; }
  .sim-card:hover .sim-thumb { transform: none; }
  .sim-tags span { font-size: 9.5px; padding: 1px 5px; }
}

/* ---------- 二级页顶部快捷栏（跑马灯要的「返回 / 前往分类」） ---------- */
.nav-bar-wrap {
  max-width: 1480px; margin: 14px auto 0; padding: 0 clamp(16px, 4vw, 48px);
}
.nav-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 14px;
  background: linear-gradient(180deg, var(--wa-50), rgba(255,255,255,.02));
  border: 1px solid var(--wa-70);
}
.nav-bar a { text-decoration: none; }
.nb-home {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--text-sub); background: var(--wa-60);
  border: 1px solid var(--wa-100);
  transition: background .16s, border-color .16s, transform .16s, color .16s;
  white-space: nowrap;
}
.nb-home:hover {
  color: var(--fg-strong); background: rgba(91,140,255,.22);
  border-color: rgba(124,199,255,.55); transform: translateX(-2px);
}
.nb-back {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  color: #aeb8dd; background: var(--wa-45);
  border: 1px solid var(--wa-80); white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.nb-back:hover { color: var(--fg-strong); background: rgba(124,199,255,.16); border-color: var(--cyan-a450); transform: translateX(-2px); }
.nb-crumb {
  font-size: 12.5px; color: #8f9ac0; max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-sep { width: 1px; height: 18px; background: var(--wa-120); flex: 0 0 auto; }
.nb-cats { display: flex; gap: 7px; flex-wrap: wrap; }
.nb-cats a {
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: #aeb8dd;
  border: 1px solid transparent; white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.nb-cats a:hover {
  color: var(--fg-strong); background: rgba(124,199,255,.14);
  border-color: var(--cyan-a400); transform: translateY(-2px);
}

/* 手机端：整条横向滑动，不换行，按钮加大好点 */
@media (max-width: 620px) {
  .nav-bar-wrap { margin-top: 10px; padding: 0 13px; }
  .nav-bar { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 8px 10px; scrollbar-width: none; }
  .nav-bar::-webkit-scrollbar { display: none; }
  .nb-home, .nb-back { padding: 8px 13px; font-size: 12.5px; min-height: 36px; }
  .nb-cats { flex-wrap: nowrap; }
  .nb-cats a { padding: 8px 13px; font-size: 12.5px; min-height: 36px; display: inline-flex; align-items: center; }
  .nb-sep { height: 22px; }
}

/* ---------- 回到顶部按钮（core.js 的 initBackToTop 注入） ---------- */
.to-top {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(18px, 4vh, 36px);
  z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #dbe6ff; font-family: inherit;
  background: rgba(18, 22, 40, .88);
  border: 1px solid var(--wa-140);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), visibility .25s, border-color .2s, background .2s;
  touch-action: manipulation;
}
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: rgba(91, 140, 255, .3); border-color: var(--cyan-a600); }
.to-top:active { transform: scale(.94); }
@media (max-width: 620px) {
  .to-top { width: 44px; height: 44px; right: 13px; bottom: 18px; }
}

/* ---------- 播放页：画面未出时的加载提示层 ---------- */
.video-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 20px;
  background: radial-gradient(120% 120% at 50% 40%, rgba(10, 14, 26, .82), rgba(6, 8, 16, .94));
  pointer-events: none;
  animation: vlIn .3s ease-out both;
}
.video-loading[hidden] { display: none; }
.vl-fish { font-size: 34px; animation: vlBob 1.4s ease-in-out infinite; }
.vl-text { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: #e7ecff; }
.vl-sub { margin: 0; font-size: 12px; color: #93a0c6; }
/* 广告提醒（主人要求"足够引人注目"）：金色胶囊 + 轻轻脉动，压在加载层中间。
   文案来自 /assets/texts.js；没配文案时靠 :empty 自动不占位 */
.vl-warn {
  max-width: min(92%, 460px); margin: 11px 0 2px; padding: 7px 17px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: .3px; line-height: 1.5;
  color: #2a1800; background: linear-gradient(135deg, var(--gold), var(--orange));
  box-shadow: 0 8px 22px rgba(255, 159, 67, .38), inset 0 0 0 1px var(--wa-180);
  animation: vlWarnPulse 1.8s ease-in-out infinite;
}
.vl-warn:empty { display: none; }@keyframes vlWarnPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(255, 159, 67, .38), inset 0 0 0 1px var(--wa-180); }
  50% { transform: scale(1.04); box-shadow: 0 11px 30px rgba(255, 159, 67, .56), inset 0 0 0 1px rgba(255, 255, 255, .3); }
}
@keyframes vlIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vlBob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@media (max-width: 620px) {
  .vl-fish { font-size: 28px; }
  .vl-text { font-size: 13.5px; }
  .vl-sub { font-size: 11.5px; padding: 0 10px; }
  .vl-warn { font-size: 12.5px; padding: 6px 14px; margin-top: 9px; }
}
.pbtn-refresh { color: #9dc0ff !important; border-color: var(--cyan-a350) !important; }
.pbtn-refresh:hover { background: rgba(124, 199, 255, .18) !important; }

/* =====================================================================
   2026-10-05 迭代（需求 3/4/6/7/8/11）：
   ① 鲸鲸弹窗的情绪头像（被挤下线 / 被封禁 → 头部掉黑线）
   ② 个人主页的会员区
   ③ 鲸页「最近登录 IP」「被攻击检测」两张卡片 + 封禁/会员标记
   ④ 「留空项 / 更新日志」文档页
   集中放一起，方便按需求对照；配色沿用 styles.css 的变量（--acc/--dim/--ok…）。
   ===================================================================== */

/* ---------- ① 鲸鲸弹窗：情绪头像 ---------- */
.wn-avatar { position: relative; display: inline-block; line-height: 0; }
.wn-avatar img {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--wa-160); background: var(--wa-40);
}
/* 黑线画在**头像上方**（所以 top 是负数），用内联 SVG 而不是一张图 ——
   主人以后换鲸鱼娘形象（主题设置里换「鲸鱼娘形象」）时，这个表情照样在，不会丢 */
.wn-lines {
  position: absolute; left: 50%; top: -13px; width: 56px; height: 22px;
  transform: translateX(-50%); overflow: visible; pointer-events: none;
  /* 站点是深色底，纯黑线在弹窗上几乎看不见 —— 描一圈浅色光晕，
     既保留"黑线"的画法，又能真的看出是"失落的几道线"（本地实测截图确认过） */
  filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, .92));
}
.wn-lines line { stroke: #232838; stroke-width: 3.4; stroke-linecap: round; animation: wnDrop 1.6s ease-in infinite; }
.wn-lines line:nth-child(2) { animation-delay: .24s; }
.wn-lines line:nth-child(3) { animation-delay: .48s; }
/* 从头顶往下掉一小段再淡出 —— 漫画里表示"失落 / 无语"的那几道线 */
@keyframes wnDrop {
  0% { transform: translateY(-7px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wn-lines line { animation: none; opacity: .85; } }

/* ---------- ② 个人主页：会员 ---------- */
.me-member {
  margin-top: 14px; padding-top: 12px; display: grid; gap: 10px;
  border-top: 1px solid var(--wa-80);
}
.me-member-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me-member-tag {
  padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--text-sub); background: var(--wa-70); border: 1px solid var(--wa-120);
}
.me-member-tag.vip {
  color: #2a1800; border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  box-shadow: 0 6px 16px rgba(255, 159, 67, .3);
}
.me-member-until { font-size: 12.5px; color: var(--dim); }
.me-member-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.me-redeem { display: flex; gap: 8px; }
/* ⚠️ 自己设了 display 的浮层必须补这条，不然 hidden 属性会被 display 盖掉（PROMPT 第 6 条，踩过事故） */
.me-redeem[hidden] { display: none; }
.me-redeem input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; color: #eef2ff;
  border: 1px solid var(--wa-140); background: var(--wa-60);
  font-size: 16px;               /* ≥16px：iOS 聚焦时不会自动放大整页 */
}
.me-redeem input::placeholder { color: #7d88a8; }

/* 卡片里的说明段落（whale.html 一直在用 .wh-card-note，样式之前漏了 —— 顺手补上） */
.wh-card-note { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.75; color: #8b96ba; }
.wh-card-note b { color: var(--text-sub); }
.wh-card-note code { padding: 1px 5px; border-radius: 5px; font-size: 11.5px; background: var(--cyan-a120); color: #bcd4ff; }

/* ---------- ③ 鲸页：最近登录 IP ---------- */
.wh-ips { display: grid; gap: 10px; }
.wh-ip {
  padding: 12px 14px; border-radius: 12px;
  background: var(--wa-35); border: 1px solid var(--wa-80);
}
/* 测试 IP（自己的机器）用绿色区分：一眼就能看出"这条不是别人" */
.wh-ip.is-test { border-color: var(--ok-a350); background: rgba(47, 214, 160, .06); }
.wh-ip-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.wh-ip-top code { font-size: 13px; color: #dbe3ff; }
.wh-ip-kind { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.wh-ip-kind.test { color: var(--ink); background: linear-gradient(135deg, var(--ok-soft), #2fd6a0); }
.wh-ip-kind.stranger { color: #ffe0e6; background: rgba(255, 77, 109, .22); border: 1px solid rgba(255, 77, 109, .4); }

/* ---------- ③ 鲸页：被攻击检测 ---------- */
.wh-threat { display: grid; gap: 12px; }
.wh-threat-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wh-threat-lv {
  padding: 4px 13px; border-radius: 999px; font-size: 13px; font-weight: 800;
  color: var(--ok-soft); background: rgba(47, 214, 160, .16); border: 1px solid var(--ok-a350);
}
.wh-threat-lv[data-lv="suspect"] { color: var(--gold); background: rgba(255, 215, 107, .16); border-color: rgba(255, 215, 107, .4); }
.wh-threat-lv[data-lv="likely"] { color: #ff8fa3; background: rgba(255, 77, 109, .18); border-color: rgba(255, 77, 109, .45); }
.wh-threat-lv[data-lv="unknown"] { color: #9aa6c9; background: var(--wa-70); border-color: var(--wa-140); }
.wh-threat-score { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.wh-threat-sum { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--dim); }
.wh-sig-list { display: grid; gap: 8px; }
.wh-sig { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--wa-70); }
/* 有分的判据挑出来：一眼能看出分是谁拉上去的（可解释性） */
.wh-sig.hot { background: rgba(255, 159, 67, .08); border-color: rgba(255, 159, 67, .4); }
.wh-sig-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wh-sig-head b { font-size: 13px; color: #e7ecff; }
.wh-sig-score { font-size: 12.5px; font-weight: 800; color: #9aa6c9; }
.wh-sig.hot .wh-sig-score { color: #ffb567; }
.wh-sig-head em { font-size: 11.5px; font-style: normal; color: #7d88a8; }
.wh-sig-detail { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }

/* ---------- ③ 鲸页：封禁 / 会员标记 ---------- */
.wh-vip { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #2a1800; background: linear-gradient(135deg, var(--gold), var(--orange)); }
.wh-banned { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #ffe0e6; background: rgba(255, 77, 109, .22); border: 1px solid rgba(255, 77, 109, .42); }
.wh-acc.is-banned { border-color: rgba(255, 77, 109, .35); }
.wh-ban-box { display: inline-flex; align-items: center; gap: 6px; }
.wh-ban-select {
  padding: 7px 8px; border-radius: 8px; font-size: 12.5px; color: #eef2ff;
  border: 1px solid var(--wa-140); background: var(--wa-60);
}

/* ---------- ④ 文档页（留空项 / 更新日志） ---------- */
.doc-wrap { max-width: 1020px; margin: 22px auto 0; padding: 0 clamp(16px, 4vw, 48px) 60px; }
.doc-head { margin-bottom: 6px; }
.doc-title { margin: 0 0 6px; font-size: clamp(20px, 3vw, 26px); color: #eef2ff; }
.doc-desc { margin: 0; font-size: 13px; color: var(--dim); }
.doc-updated { margin: 6px 0 0; font-size: 12px; color: #7d88a8; }
.doc-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 18px; }
.doc-toc-title { font-size: 12px; color: #7d88a8; }
.doc-toc a {
  /* ⚠️ 触摸目标 ≥28px（手机端清单第 2 条）：视觉上是个小胶囊，但点击区必须撑开 ——
     验收脚本 `verify-mobile.cjs` 真的会量（第一版只给 padding 4px，量出来 25px，红了两个页面） */
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; text-decoration: none;
  color: var(--text-sub); background: var(--wa-50); border: 1px solid var(--wa-100);
  transition: background .16s, border-color .16s;
}
.doc-toc a.doc-toc-lv1 { color: var(--violet); }
.doc-toc a:hover { background: rgba(255, 255, 255, .11); border-color: var(--cyan-a450); }

.doc-body {
  padding: 20px clamp(14px, 3vw, 26px); border-radius: 16px; font-size: 14px; line-height: 1.85;
  color: #dde3f7; background: rgba(9, 12, 22, .72); border: 1px solid var(--wa-80);
  word-break: break-word;
}
.doc-body > :first-child { margin-top: 0; }
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { color: #eef2ff; line-height: 1.45; scroll-margin-top: 92px; }
.doc-body h1 { margin: 26px 0 12px; font-size: 21px; }
.doc-body h2 {
  margin: 26px 0 10px; padding-bottom: 7px; font-size: 18px;
  border-bottom: 1px solid var(--wa-100);
}
.doc-body h3 { margin: 20px 0 8px; font-size: 15.5px; }
.doc-body h4 { margin: 16px 0 6px; font-size: 14px; color: var(--text-sub); }
.doc-body p { margin: 9px 0; }
.doc-body a { color: var(--violet); }
.doc-body ul, .doc-body ol { margin: 9px 0; padding-left: 22px; }
.doc-body li { margin: 3px 0; }
.doc-body code {
  padding: 1px 6px; border-radius: 6px; font-size: 12.8px;
  background: var(--cyan-a120); color: #bcd4ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.doc-body pre {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px; overflow-x: auto;
  background: rgba(0, 0, 0, .38); border: 1px solid var(--wa-80);
}
.doc-body pre code { padding: 0; background: none; color: #cfd8f5; font-size: 12.5px; }
.doc-body blockquote {
  margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--cyan-a500);
  border-radius: 0 10px 10px 0; background: rgba(124, 199, 255, .07); color: #c7d1ee;
}
.doc-body hr { margin: 20px 0; border: 0; border-top: 1px solid var(--wa-100); }
/* 表格：外面套一层横向滚动容器，窄屏时**表格自己滚**、页面不横向溢出 */
.md-table-wrap { margin: 12px 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--wa-80); }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-body th, .doc-body td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wa-70); }
.doc-body th { font-weight: 700; color: #eef2ff; background: var(--wa-50); white-space: nowrap; }
.doc-body tr:last-child td { border-bottom: 0; }
.doc-empty { padding: 18px 0; font-size: 13.5px; color: var(--dim); }

@media (max-width: 620px) {
  .doc-body { padding: 16px 13px; font-size: 13.5px; }
  .doc-body table { font-size: 12.5px; }
  .doc-body th, .doc-body td { padding: 7px 9px; }
  .doc-toc { gap: 6px; }
  .doc-toc a { font-size: 12px; padding: 4px 9px; }
  .wn-avatar img { width: 66px; height: 66px; }
  .wh-ban-select { padding: 6px 7px; font-size: 12px; }
}

/* ---------- 鲸页：清理缓存 / 热更新的小列表（颜色都用 :root 的 token）---------- */
.wh-cache-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.wh-cache-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: var(--wa-60); font-size: 13px; }
.wh-cache-name { color: var(--fg-strong); }
.wh-cache-size { color: var(--text-mute); font-size: 12.5px; white-space: nowrap; }
.wh-cache-empty { margin: 4px 0; font-size: 13px; color: var(--text-mute); }
.wh-tip { font-size: 12.5px; color: var(--text-sub); }