/* =========================================================
   MediaCMS 视觉美化 v17 (2026-10-23) —— YouTube 桌面版对齐
   搜索框 540×40 居中胶囊（图标移到胶囊内左侧，去竖杠）
   14px 字体体系 / 无底框卡片 / 红胶囊上传按钮
   滚动条 YouTube 式悬浮：默认隐形，悬停浮现细灰条
   视频网格：桌面端(≥1024px) 所有列表统一 3 列铺满 + 左右 32px 边距
   侧栏：背景与主区同色（v15）
   头部&卡片：logo 28px(修正 max-height 变量限制)、卡片加频道头像(JS)、
   标题 14px/500/行高20px、hover 缩略图放大+标题变蓝（v17，YouTube 细节）
   配套缓存戳：head-links.html ?v=yt18
   ========================================================= */

:root {
  --mc-red: #ff0033;             /* YouTube 红 */
  --mc-red-hover: #e6002e;
  --mc-bg: #f9f9f9;              /* 暖白底 */
  --mc-text: #0f0f0f;            /* 近黑文字 */
  --mc-text-sub: #606060;        /* 次要文字 */
}

/* ---------- 全局：14px 体系 + Roboto 字体栈 ---------- */
body {
  background: var(--mc-bg) !important;
  color: var(--mc-text) !important;
  font-size: 14px !important;
  font-family: Roboto, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif !important;
}

/* ---------- 顶栏：白底、logo 30px、图标按钮灰圆底悬停 ---------- */
.page-header {
  position: relative !important;
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
}
.page-header::before { display: none !important; }   /* 去掉渐变线 */
.page-header .logo img { height: 30px !important; }
.page-header .circle-icon-button {
  border-radius: 50% !important;
  transition: background .2s ease !important;
}
.page-header .circle-icon-button:hover {
  background: #f2f2f2 !important;
  color: var(--mc-text) !important;
}

/* ---------- 上传按钮：红胶囊（登录态是 button.button-link，非 a 标签） ---------- */
.page-header-right .button-link,
.page-header-right a[href="/upload"] {
  background: var(--mc-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.page-header-right .button-link:hover,
.page-header-right a[href="/upload"]:hover {
  background: var(--mc-red-hover) !important;
}

/* ---------- 视频卡片：YouTube 无底框式（透明、无阴影、无边框） ---------- */
.item.video-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.item.video-item .item-thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.item.video-item .item-thumb img,
.item.video-item .item-thumb video {
  border-radius: 12px !important;
  transform: none !important;
  transition: none !important;
}
.item-duration {
  background: rgba(0, 0, 0, .8) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 2px 5px !important;
}
.item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--mc-text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-author {
  color: var(--mc-text-sub) !important;
  font-size: 12px !important;
}
.item-views, .item-date {
  color: var(--mc-text-sub) !important;
  font-size: 12px !important;
}

/* ---------- 主内容区 / 页脚 / 滚动条 ---------- */
.page-main-wrap { background: var(--mc-bg) !important; }
.page-main-inner { padding-top: 22px !important; }
#app-footer {
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
  color: var(--mc-text-sub) !important;
}
/* ---------- 滚动条：YouTube 式悬浮（默认隐形，悬停浮现细灰条） ----------
   侧栏/内容区/整页滚动条不再常驻显示，彻底消除页面中间的灰竖条 */
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
*:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .24); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .4); }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(0, 0, 0, .24) transparent; }

/* =========================================================
   搜索框 v5 —— 桌面端专用（≥1024px）
   ≤1023px 是移动模式（原生隐藏/展开逻辑），完全不触碰
   ========================================================= */
@media (min-width: 1024px) {

  /* wrap 只保留定位职责：透明、无边框，540px 居中 */
  .search-field-wrap {
    position: relative !important;
    display: table !important;
    width: 540px !important;
    max-width: 40% !important;
    height: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* 胶囊本体转移到 .text-field-wrap：40px 高灰底圆角 */
  .search-field-wrap .text-field-wrap {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;               /* 清零原生 64px 右侧按钮预留 */
    height: 40px !important;
    background: #f2f2f2 !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease !important;
  }
  .search-field-wrap .text-field-wrap:hover {
    background: #e9e9e9 !important;
  }
  .search-field-wrap .text-field-wrap:focus-within {
    background: #ffffff !important;      /* YouTube 行为：聚焦白底描边 */
    border-color: #1c62b9 !important;
  }

  /* 输入框：15px，左侧给图标留 44px，无右侧预留 */
  .search-field-wrap input[type="text"] {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 16px 0 44px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--mc-text) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .search-field-wrap input[type="text"]::placeholder {
    color: #888888 !important;
  }

  /* 放大镜图标：移到胶囊内左侧 */
  .search-field-wrap button[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .search-field-wrap button[type="submit"] .material-icons {
    font-size: 20px !important;
    color: #606060 !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   侧栏 v15 —— 与主区同色，消除灰色色差（YouTube 式）
   原生 .page-sidebar 背景 #f5f5f5，主区 #f9f9f9，有色差；
   改为与主区一致，导航项 hover/选中高亮保留原生。
   ========================================================= */
.page-sidebar {
  background: var(--mc-bg) !important;
}
.page-sidebar .nav-panel {
  background: transparent !important;
}

/* =========================================================
   视频网格 v14 —— 桌面端(≥1024px) 所有列表统一 3 列铺满内容区
   1) 解除 .media-list-wrapper 原生 max-width(6×218=1308px) 上限，
      内容区随浏览器宽度自适应
   2) 给内容区加左右 32px 内边距（YouTube 同款舒适边距，
      v13 完全贴边太极端，v14 补齐）
   3) 普通网格(非 list-slider)：.items-list 改 flex 3 列铺满
   4) 轮播区(list-slider)：同样转 flex 3 列网格，关闭横向滚动
      容器并隐藏前后箭头按钮
   移动端(<1024px)不触碰。
   ========================================================= */
@media (min-width: 1024px) {
  .items-list-ver.media-list-wrapper {
    max-width: 100% !important;
    padding: 0 32px !important;
  }
  .items-list-ver.media-list-wrapper .media-list-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .items-list-ver.media-list-wrapper .media-list-row .items-list-outer .items-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px 16px !important;
  }
  .items-list-ver.media-list-wrapper .media-list-row .items-list-outer .item {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }
  .items-list-ver.media-list-wrapper .media-list-row .items-list-outer.list-slider .items-list-wrap {
    overflow: visible !important;
    white-space: normal !important;
    min-height: 0 !important;
  }
  .items-list-ver.media-list-wrapper .media-list-row .items-list-outer.list-slider .previous-slide,
  .items-list-ver.media-list-wrapper .media-list-row .items-list-outer.list-slider .next-slide {
    display: none !important;
  }
}

/* =========================================================
   头部 & 卡片 v17 —— 对齐 YouTube 细节
   1) 头部 logo：28px（覆盖 _commons 的 --default-logo-height 18px
      max-height 变量限制，需同时设 height 与 max-height）
   2) 卡片主体 flex：左侧频道头像 + 右侧标题/元信息（YouTube 式）
   3) 字体：标题 14px/500/行高 20px（YouTube 同款），两行截断
   4) hover：缩略图轻微放大 + 标题变 YouTube 蓝 #065fd4
   频道头像 .item-avatar 由 JS（custom-item-avatars.js）注入
   ========================================================= */
.page-header .logo img {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
}

.item.video-item .item-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  padding-top: 8px !important;
}
.item.video-item .item-main > h3 {
  flex: 1 1 auto !important;
  padding-left: 12px !important;
  margin: 0 !important;
}
.item.video-item .item-main .item-meta {
  flex: 1 0 100% !important;
  float: none !important;
  clear: none !important;
  padding-left: 52px !important;
  margin-top: 2px !important;
  line-height: 18px !important;
}
.item.video-item .item-avatar {
  flex: 0 0 40px !important;
}
.item.video-item .item-avatar .item-avatar-inner {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 36px !important;
  text-align: center !important;
}

/* 字体对齐 YouTube：标题 14px/500/20px 行高，两行截断 */
.item.video-item .item-main h3,
.item.video-item .item-main h3 a,
.item.video-item .item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--mc-text) !important;
  text-decoration: none !important;
}
.item.video-item .item-main h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item.video-item .item-author {
  font-size: 12px !important;
  color: var(--mc-text-sub) !important;
}
.item.video-item .item-views,
.item.video-item .item-date {
  font-size: 12px !important;
  color: var(--mc-text-sub) !important;
}

/* hover：YouTube 式 —— 缩略图轻微放大 + 标题变蓝 */
.item.video-item .item-thumb img,
.item.video-item .item-thumb video {
  transform: scale(1) !important;
  transition: transform 0.25s ease !important;
}
.item.video-item:hover .item-thumb img,
.item.video-item:hover .item-thumb video {
  transform: scale(1.05) !important;
}
.item.video-item .item-main h3 a:hover {
  color: #065fd4 !important;
}

/* 元信息：观看 与 日期 之间用 · 分隔 */
.item.video-item .item-views::after {
  content: " · ";
  color: var(--mc-text-sub) !important;
}

/* =========================================================
   分类标签 v18 —— YouTube 风格 chips（首页顶部）
   JS：custom-category-chips.js 注入 .xrtube-cats
   全部 chip 置顶；桌面端与媒体列表对齐（左右 32px）
   ========================================================= */
.xrtube-cats {
  padding: 14px 32px 4px;
}
.xrtube-cats-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.xrtube-cats-scroll::-webkit-scrollbar { display: none; }
.xrtube-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f2f2f2;
  color: var(--mc-text, #0f0f0f);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.xrtube-chip:hover { background: #e5e5e5; }
.xrtube-chip.is-active {
  background: #0f0f0f;
  color: #ffffff;
}
@media (max-width: 1023px) {
  .xrtube-cats { padding: 12px 16px 4px; }
}
body{--default-logo-height:40px;--logo-height:40px}
.header .logo span > img, .header .logo img, .logo span > img { max-height: 40px !important; }

.page-header .logo span > img,
.page-header .logo img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
}


/* ===== 注册/登录按钮：与 logo 红色一致 + 间距 ===== */
.page-header .button-link.sign-in,
.page-header .button-link.register-link {
  background: linear-gradient(135deg, #FF4B33 0%, #C8001E 100%);
  border: none;
  color: #fff;
}
.page-header .sign-in-wrap {
  margin-right: 8px;
}

/* ===== 注册/登录按钮修正：背景对齐 logo 红色渐变(!important) + 间距用 padding ===== */
.page-header .button-link.sign-in,
.page-header .button-link.register-link {
  background: linear-gradient(135deg, #FF4B33 0%, #C8001E 100%) !important;
  border: none !important;
  color: #fff !important;
}
.page-header .sign-in-wrap {
  padding-right: 8px !important;
}

/* ===== 主页紧凑化（YouTube 风格）：消除顶部大空隙 ===== */
.page-main-wrap {
  padding-top: 8px !important;
}
.media-list-header {
  padding-top: 4px !important;
}
.media-list-header h2 {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* ===== YouTube 风格：视频卡片 hover 反馈 + 加粗标题 ===== */
.items-list .item {
  border-radius: 8px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.items-list .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body.dark_theme .items-list .item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.items-list .item h3 {
  font-weight: 600 !important;
}
.items-list .item:hover h3 {
  color: #065fd4 !important;
}

/* ===== 修正：卡片 hover 反馈 + 加粗（更高特异性覆盖旧 !important 规则） ===== */
.items-list .item.video-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
body.dark_theme .items-list .item.video-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.items-list .item.video-item .item-main h3,
.items-list .item.video-item .item-main h3 a {
  font-weight: 600 !important;
}
.items-list .item.video-item:hover .item-main h3,
.items-list .item.video-item:hover .item-main h3 a {
  color: #065fd4 !important;
}
/* ===== 视频卡片 hover 播放：进度条 + 声音开关（YouTube 风格） ===== */
.item-thumb {
  position: relative;
}
.zhgn-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: none;
  z-index: 3;
}
.zhgn-progress.zhgn-show {
  display: block;
}
.zhgn-progress-fill {
  height: 100%;
  width: 0;
  background: #f00;
}
.zhgn-mute {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  display: none;
  line-height: 1;
  font-size: 16px;
}
.zhgn-mute.zhgn-show {
  display: block;
}
.zhgn-mute:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ===== 修正：hover 缩略图轻微放大（YouTube 观感）+ 标题背景与卡片一致 ===== */
.items-list .item .item-thumb video,
.items-list .item .item-thumb img {
  transition: transform 0.2s ease;
  transform-origin: center;
}
.items-list .item:hover .item-thumb video,
.items-list .item:hover .item-thumb img {
  transform: scale(1.06);
}
.items-list .item .item-content h3 span,
.items-list .item .item-main h3 a {
  background-color: transparent !important;
}
/* =========================================================
   卡片元信息并成一行 v19（2026-10-23）
   YouTube 紧凑排版：作者 • 观看 • 时间 同一行
   原因：.item-author 原为 block，导致单独占一行
   ========================================================= */
.items-list .item.video-item .item-main .item-meta {
  display: block !important;
  flex: 1 0 100% !important;
  margin-top: 2px !important;
  padding-left: 52px !important;
  line-height: 18px !important;
  height: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.items-list .item.video-item .item-main .item-meta .item-author,
.items-list .item.video-item .item-main .item-meta .item-author a {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.items-list .item.video-item .item-main .item-meta .item-views,
.items-list .item.video-item .item-main .item-meta .item-date {
  display: inline !important;
}
/* 作者与观看之间加一个分隔点；观看与时间之间沿用 _commons.css 的 • */
.items-list .item.video-item .item-main .item-meta .item-author::after {
  content: "•" !important;
  margin: 0 4px !important;
  color: var(--mc-text-sub) !important;
}
/* 去掉此前多加的第二个分隔符，避免出现两个点 */
.items-list .item.video-item .item-views::after {
  content: none !important;
}
/* 标题背景保持透明，与卡片底色一致 */
.items-list .item.video-item .item-main h3,
.items-list .item.video-item .item-main h3 a,
.items-list .item.video-item .item-main h3 span {
  background-color: transparent !important;
}
/* =========================================================
   hover 预览控件 v20（2026-10-23）
   目标：进度条更容易看到/拖到；喇叭按钮更清晰
   ========================================================= */
.items-list .item .item-thumb .zhgn-progress {
  height: 10px !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  cursor: pointer;
  z-index: 6 !important;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.items-list .item .item-thumb .zhgn-progress-fill {
  background: #ff0033 !important;
  height: 100%;
}
.items-list .item .item-thumb .zhgn-progress:hover {
  height: 12px !important;
}
.items-list .item .item-thumb .zhgn-mute {
  z-index: 7 !important;
  width: 34px !important;
  height: 30px !important;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}
.items-list .item .item-thumb .zhgn-mute.zhgn-show {
  display: flex !important;
}
.items-list .item .item-thumb .zhgn-mute .zhgn-mute-icon {
  font-size: 20px !important;
  color: #fff !important;
}
/* =========================================================
   hover 视觉对齐 YouTube v21（2026-10-23）
   问题：灰底 + box-shadow 让卡片边缘发虚，看着"毛毛躁躁"
   做法：去掉阴影与灰底，缩略图 1.1 倍放大并裁圆角，标题不变色
   ========================================================= */
/* 卡片本体：不加圆角、不加底、不加阴影 */
.items-list .item.video-item,
.items-list .item.video-item:hover,
body.dark_theme .items-list .item.video-item:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 缩略图：YouTube 式 12px 圆角 + 裁切，放大不溢出 */
.items-list .item .item-thumb,
.items-list .item.video-item .item-thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 放大 1.1（YouTube 观感） */
.items-list .item .item-thumb video,
.items-list .item .item-thumb img,
.items-list .item:hover .item-thumb video,
.items-list .item:hover .item-thumb img,
.items-list .item.video-item:hover .item-thumb video,
.items-list .item.video-item:hover .item-thumb img {
  transform: scale(1.1) !important;
  transition: transform 0.25s ease !important;
}

/* 标题：hover 不换色（YouTube 标题始终是正文色） */
.items-list .item.video-item:hover .item-main h3,
.items-list .item.video-item:hover .item-main h3 a {
  color: var(--mc-text) !important;
  background-color: transparent !important;
}
/* v22 修正：静止态必须是 1 倍，只有 hover 才 1.1 倍（v21 误把 1.1 也套在静止态） */
.items-list .item .item-thumb video,
.items-list .item .item-thumb img {
  transform: scale(1) !important;
  transition: transform 0.25s ease !important;
}
.items-list .item:hover .item-thumb video,
.items-list .item:hover .item-thumb img,
.items-list .item.video-item:hover .item-thumb video,
.items-list .item.video-item:hover .item-thumb img {
  transform: scale(1.1) !important;
}
/* =========================================================
   v23：恢复"能看见的卡片"，但保持清爽（无阴影）
   上一版把卡片底做成透明 → 卡片与页面底 #f9f9f9 融合，看起来像消失了
   ========================================================= */
.items-list .item.video-item {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.dark_theme .items-list .item.video-item {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* hover：不加深底、不加阴影，只让描边清晰一点 */
.items-list .item.video-item:hover,
body.dark_theme .items-list .item.video-item:hover {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
}
body.dark_theme .items-list .item.video-item:hover {
  background-color: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* 缩略图加载前的占位色，避免空白一片 */
.items-list .item.video-item .item-thumb {
  background-color: #e8e8e8 !important;
}
body.dark_theme .items-list .item.video-item .item-thumb {
  background-color: #2a2a2a !important;
}
/* =========================================================
   v24：卡片四角圆角（含 hover 状态）+ 缩略图 hover 放大 1.2
   根因：v21 里 `.items-list .item.video-item:hover { border-radius:0 }`
        特异性高于 v23 的静止态规则，一 hover 圆角就变尖角
   ========================================================= */
.items-list .item.video-item,
.items-list .item.video-item:hover,
.items-list .item.video-item:focus-within,
body.dark_theme .items-list .item.video-item,
body.dark_theme .items-list .item.video-item:hover {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.items-list .item.video-item .item-thumb,
.items-list .item.video-item:hover .item-thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* hover 放大 1.2（原 1.1） */
.items-list .item.video-item:hover .item-thumb video,
.items-list .item.video-item:hover .item-thumb img {
  transform: scale(1.2) !important;
  transition: transform 0.25s ease !important;
}
/* =========================================================
   v25：卡片加填充色（对齐 YouTube 亮色 surface）
   - 底色 rgba(0,0,0,.05) ≈ #f2f2f2，页面底 #f9f9f9 → 有填充但不刺眼
   - 去描边、去阴影，圆角 14px，仅靠填充色界定卡片
   ========================================================= */
.items-list .item.video-item,
.items-list .item.video-item:focus-within {
  background-color: #f2f2f2 !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.items-list .item.video-item:hover {
  background-color: #e9e9e9 !important;
  border: none !important;
  box-shadow: none !important;
}
body.dark_theme .items-list .item.video-item {
  background-color: #272727 !important;
}
body.dark_theme .items-list .item.video-item:hover {
  background-color: #303030 !important;
}
/* =========================================================
   v26：进度条改细 + 大命中区（YouTube 做法）
   视觉线 3px（悬停/拖动 5px），但可点击区域 16px 高，不影响操作手感
   ========================================================= */
.items-list .item .item-thumb .zhgn-progress {
  height: 16px !important;
  bottom: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 6 !important;
  cursor: pointer;
  touch-action: none;
}
/* 轨道：3px 细线，贴在缩略图底部 */
.items-list .item .item-thumb .zhgn-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 2px;
}
/* 已播放部分：3px 红线 */
.items-list .item .item-thumb .zhgn-progress .zhgn-progress-fill {
  position: absolute !important;
  left: 0;
  bottom: 0 !important;
  height: 3px !important;
  background: #ff0033 !important;
  border-radius: 2px;
  z-index: 1;
}
/* 悬停 / 拖动时加粗到 5px，提示"可以抓" */
.items-list .item .item-thumb .zhgn-progress:hover::before,
.items-list .item .item-thumb .zhgn-progress.zhgn-dragging::before {
  height: 5px;
}
.items-list .item .item-thumb .zhgn-progress:hover .zhgn-progress-fill,
.items-list .item .item-thumb .zhgn-progress.zhgn-dragging .zhgn-progress-fill {
  height: 5px !important;
}
/* v27：命中区高度固定 16px，不随悬停变小（v20 的 :hover 12px 会覆盖） */
.items-list .item .item-thumb .zhgn-progress,
.items-list .item .item-thumb .zhgn-progress:hover,
.items-list .item .item-thumb .zhgn-progress.zhgn-dragging {
  height: 16px !important;
  background: transparent !important;
}
/* =========================================================
   v28（2026-10-24）：长标题不再掉到头像下方
   现象：标题一长，就被挤到 .item-main 的第二行、从卡片左边缘起排，
        头像独占第一行，头像右侧空白。
   原因：.item-main 为 flex-wrap: wrap，h3 为 flex: 1 1 auto，
        长标题的 max-content 宽度放不进头像右侧剩余空间 → 换行。
   做法：h3 改为 flex: 1 1 0% + min-width: 0，与头像同行并收缩；
        标题在窄列内两行截断；meta 仍整行、左对齐 52px。
   ========================================================= */
.items-list .item.video-item .item-main > h3 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  padding-left: 12px !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 18px !important;
}
.items-list .item.video-item .item-main > h3 a {
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

/* 卡片底部留白：meta 不再紧贴卡片圆角下缘 */
.items-list .item.video-item .item-main {
  padding-bottom: 10px !important;
}
/* =========================================================
   v29（2026-10-24）：meta 紧贴标题，不被拉伸到卡片底部
   现象：同行卡片等高拉伸后，单行标题卡片的 meta 被 align-content:stretch
        推到卡片底部，标题与 meta 之间出现空档（YouTube 是紧贴标题）。
   做法：.item-main 的 flex 行改为顶部排列。
   ========================================================= */
.items-list .item.video-item .item-main {
  align-content: flex-start !important;
}
/* =========================================================
   v30（2026-10-24）：meta 紧跟标题，不再与头像底边对齐
   现象：头像 36px 撑高了第一行 flex line，单行标题卡片的 meta
        被顶到与两行标题卡片同一水平（标题下方留出约 20px 空档）。
   做法：头像绝对定位脱离 flex 行高，标题占满整行、左缩进 52px，
        meta 紧随标题之后（YouTube 排版）。
   ========================================================= */
.items-list .item.video-item .item-main {
  position: relative !important;
  align-content: flex-start !important;
}
.items-list .item.video-item .item-main .item-avatar {
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  flex: none !important;
}
.items-list .item.video-item .item-main > h3 {
  flex: 1 1 100% !important;
  width: 100% !important;
  padding-left: 52px !important;
}
/* =========================================================
   v31（2026-10-24）：顶栏「上传 / 录制」弹层菜单重做
   问题：v? 的顶栏红胶囊规则 `.page-header-right a[href="/upload"]`
        也命中了弹层里的同名菜单项，导致「上传」整行被涂成红色长条，
        与下面「Record」行不成体系，图标与文字也不对齐。
   做法：
     1) 弹层内的链接一律去掉红底，回到菜单样式；
     2) 弹层改成 12px 圆角 + 轻投影的卡片（YouTube 观感）；
     3) 菜单行等高 40px、图标定宽 24px、文字左对齐，
        hover 用整行浅灰，不再出现胶囊/红块。
   ========================================================= */

/* 1) 修泄漏：弹层内链接不再是红胶囊 */
.page-header .popup a,
.page-header .popup a[href="/upload"] {
  background: transparent !important;
  color: #0f0f0f !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
body.dark_theme .page-header .popup a,
body.dark_theme .page-header .popup a[href="/upload"] {
  color: #f1f1f1 !important;
}

/* 2) 弹层容器：圆角卡片、轻投影 */
.page-header .popup {
  width: 280px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.10) !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}
body.dark_theme .page-header .popup {
  background: #212121 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 3) 菜单行：等高、图标定宽、文字左对齐 */
.page-header .popup .nav-menu {
  padding: 0 !important;
}
.page-header .popup .nav-menu li > a,
.page-header .popup .nav-menu li > button {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 40px !important;
  color: #0f0f0f !important;
  text-align: left !important;
  text-decoration: none !important;
}
body.dark_theme .page-header .popup .nav-menu li > a,
body.dark_theme .page-header .popup .nav-menu li > button {
  color: #f1f1f1 !important;
}
.page-header .popup .nav-menu li > a:hover,
.page-header .popup .nav-menu li > a:focus,
.page-header .popup .nav-menu li > button:hover,
.page-header .popup .nav-menu li > button:focus {
  background: #f2f2f2 !important;
}
body.dark_theme .page-header .popup .nav-menu li > a:hover,
body.dark_theme .page-header .popup .nav-menu li > a:focus {
  background: #303030 !important;
}

/* 图标：统一 24px 定宽、居中、灰色，与文字留 16px 间距 */
.page-header .popup .nav-menu .menu-item-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  margin: 0 16px 0 0 !important;
  color: #606060 !important;
  line-height: 1 !important;
}
body.dark_theme .page-header .popup .nav-menu .menu-item-icon {
  color: #aaaaaa !important;
}
.page-header .popup .nav-menu .menu-item-icon .material-icons {
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.page-header .popup .nav-menu li > a > span:last-child,
.page-header .popup .nav-menu li > button > span:last-child {
  display: inline-block !important;
  line-height: 40px !important;
  vertical-align: middle !important;
}
/* =========================================================
   v32（2026-10-24）：卡片头像改为真实头像图
   v4 的 custom-item-avatars.js 会把用户真实头像写成
   .item-avatar-inner 内的 <img>，这里补齐裁切与圆形样式：
   36px 圆形、cover 裁切、无内边距，加载失败时 JS 回退首字。
   ========================================================= */
.items-list .item.video-item .item-avatar .item-avatar-inner {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.items-list .item.video-item .item-avatar .item-avatar-inner img,
.item.video-item .item-avatar .item-avatar-inner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  margin: 0 !important;
  box-shadow: none !important;
}