.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -8px;
  left: 8px;
  overflow: hidden;
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  opacity: 0.6;
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

.wrap:hover {
  opacity: 0.9;
}

.wraps {
  display: inline-block;
  text-align: center;
  width: 200px;
  height: 30px;
  line-height: 27px;
  position: absolute;
  top: 30px;
  right: -50px;
  z-index: 2;
  overflow: hidden;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  border: 1px dashed;
  box-shadow:
    0 0 0 1px #000,
    0px 21px 5px -18px rgba(0, 0, 0, 0.6);
  background: rgb(1, 132, 127);
}

.flash {
  font-weight: bold;
  font-size: calc(10px + 4vh);
  line-height: calc(10px + 6.6vh);
  text-shadow:
    0 0 5px #ffa500,
    0 0 15px #ffa500,
    0 0 20px #ffa500,
    0 0 40px #ffa500,
    0 0 60px #ff0000,
    0 0 10px #ff8d00,
    0 0 98px #ff0000;
  color: #fff6a9;
  font-family: "Sacramento", cursive;
  text-align: center;
  animation: blink 1s infinite;
  -webkit-animation: blink 1s infinite;
  margin: 1rem 0;
}
.bling {
  text-align: center;
  margin: 2rem 0;
}
.bling1 {
  margin: 0;
  padding: 0;
  color: white;
  display: inline-block;
  font-size: 2.3rem;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #e60073,
    0 0 40px #e60073,
    0 0 50px #e60073,
    0 0 60px #e60073,
    0 0 70px #e60073;
}

/* 劫持兼容 start */
.defaultimg,
.dx-tag-div:has(> img:not([src])),
.dx-tag-div:has(> img.loading),
a:has(> img:not([src])),
a:has(> img.loading) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-nav.side-toolbar-list .dx-tag-li {
  position: relative;
  display: inline-block;
  margin: 0 0.25rem;
}

.navbar-nav.side-toolbar-list .dx-tag-li a {
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.5rem;
  border-radius: 100%;
  font-size: 0.75rem;
  background: #2c2a2a;
  color: #ccc;
  vertical-align: middle;
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

.navbar-nav.side-toolbar-list .dx-tag-li a i {
  font-size: 0.9rem;
  line-height: 2.5rem;
}

.page-navigator > .dx-tag-li {
  display: none;
}

.page-navigator > .next {
  display: inline-block;
  float: right;
}

/* xf0818 分页模块样式 start — 仅 .page-navigator-xf，避免冲掉评论/标签旧 ol 分页 */
.page-navigator.page-navigator-xf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  margin: 1.25rem 0;
  padding: 0;
  float: none;
}

.page-navigator-xf .page-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}

.page-navigator-xf .page-info {
  color: #333;
  font-size: 18px;
  white-space: nowrap;
}

.page-navigator-xf .page-btn,
.page-navigator-xf .page-jump input,
.page-navigator-xf .page-jump button {
  box-sizing: border-box;
  height: 50px;
  border: 1px solid #333;
  border-radius: 4px;
  background: transparent;
  color: #333;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
}

.page-navigator-xf .page-btn {
  width: 110px;
  padding: 0;
}

.page-navigator-xf .page-jump input {
  width: 80px;
  padding: 0 0.25rem;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.page-navigator-xf .page-jump input::-webkit-outer-spin-button,
.page-navigator-xf .page-jump input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.page-navigator-xf .page-jump button {
  width: 65px;
  padding: 0;
  cursor: pointer;
}

/* 首尾页占位：第 1 页的上一页、末页的下一页只留宽度不显示，PC 与 H5 一致 */
.page-navigator-xf .pagination-h5-only {
  display: inline-block;
  visibility: hidden;
}

.page-navigator-xf .page-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

body.theme-dark .page-navigator-xf .page-info,
body.theme-dark .page-navigator-xf .page-btn,
body.theme-dark .page-navigator-xf .page-jump input,
body.theme-dark .page-navigator-xf .page-jump button {
  color: #fff;
  border-color: #fff;
}

@media (max-width: 767px) {
  .page-navigator.page-navigator-xf {
    gap: 0.625rem;
    margin: 1rem 0;
  }

  .page-navigator-xf .page-info,
  .page-navigator-xf .page-btn,
  .page-navigator-xf .page-jump input,
  .page-navigator-xf .page-jump button {
    font-size: 12px;
  }

  .page-navigator-xf .page-btn,
  .page-navigator-xf .page-jump input,
  .page-navigator-xf .page-jump button {
    height: 34px;
    line-height: 32px;
  }

  .page-navigator-xf .page-btn {
    width: 54px;
  }

  .page-navigator-xf .page-jump input {
    width: 56px;
  }

  .page-navigator-xf .page-jump button {
    width: 44px;
  }
}
/* xf0818 分页模块样式 end */

:where(.dx-tag-div, .dx-tag-p, .dx-tag-ol, .dx-tag-ul, .dx-tag-li) {
  /* all: unset; */
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.not-safari #nav .menu .dx-tag-li a,
body.not-safari .blog-title {
  font-weight: 400;
}

#nav .menu .dx-tag-li a {
  padding: 0.375rem 1.75rem;
  position: relative;
  line-height: 2.25rem;
  color: #9ba3ad;
  display: block;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 400;
  -webkit-transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -ms-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

body.theme-dark #nav .menu .dx-tag-li a {
  color: #ccc !important;
}

body.not-safari #nav .menu .dx-tag-li a {
  font-size: 1.125rem;
  line-height: 2rem;
}

#nav-toolbar .side-toolbar .side-toolbar-list .dx-tag-li {
  display: inline-block;
  margin: 0 0.25rem;
  line-height: 3.625rem;
}

#nav-toolbar .side-toolbar .side-toolbar-list .dx-tag-li a {
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.5rem;
  border-radius: 100%;
  font-size: 0.75rem;
  background: #2c2a2a;
  color: #ccc;
  vertical-align: middle;
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
}
/* 劫持兼容 end */

/*
 * 修复 PC 端 DPlayer 进度条一点就跳到结尾：
 * Mirages 的 html{overflow:hidden} 会破坏 DPlayer getBoundingClientRectViewLeft。
 * auto 不够，必须 visible；用 :has 限定桌面端有播放器的页面。
 */
html:has(body.desktop .dplayer) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.post-content .content-file .content-file-icon {
  display: none !important;
}

@media (max-width: 767px) {
  .post-content .content-file {
    padding: 0 1rem !important;
  }

  #nav .menu {
    margin-top: 1.25rem;
  }

  .navbar-nav .category-list .category-list {
    background-color: transparent;
  }

  .navbar-nav .category-list ul.list,
  .navbar-nav .category-list .dx-tag-ul.list {
    display: block !important;
  }

  #nav .menu .category-list ul.list li,
  #nav .menu .category-list .dx-tag-ul.list .dx-tag-li {
    font-weight: 400;
    padding: 0;
    display: block;
    width: auto;
  }

  #nav .menu .category-list ul.list li:nth-child(even),
  #nav .menu .category-list ul.list li:nth-child(odd),
  #nav .menu .category-list .dx-tag-ul.list .dx-tag-li:nth-child(even),
  #nav .menu .category-list .dx-tag-ul.list .dx-tag-li:nth-child(odd) {
    padding-right: unset;
    padding-left: unset;
  }

  #nav .menu .category-list ul.list li > a,
  #nav .menu .category-list .dx-tag-ul.list .dx-tag-li > .dx-tag-a {
    background-color: transparent;
    border-radius: unset;
    padding: 0.375rem 1.75rem;
    position: relative;
    line-height: 2.25rem;
    display: block;
    font-size: 1.25rem;
    text-align: center;
    font-weight: 400;
  }

  body #nav .menu .category-list ul.list li > a,
  body #nav .menu .category-list .dx-tag-ul.list .dx-tag-li > .dx-tag-a {
    background: transparent;
  }

  body #nav .menu .category-list {
    background: transparent;
  }

  body.theme-dark #nav .menu li a,
  body.theme-dark #nav .menu .dx-tag-li .dx-tag-a {
    color: #ccc !important;
  }

  body.theme-white #nav .menu li a,
  body.theme-white #nav .menu .dx-tag-li .dx-tag-a {
    color: #333 !important;
    font-weight: 400 !important;
  }

  #nav .author {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  #comment-form .comment-input[name=url],
  #comment-form .comment-input[name=mail] {
    display: none !important;
  }
}
/* ===================== post-card 列表页尺寸对齐参考站 cgw =====================
   首页 #index 与 分类/标签/作者/翻页 #archive 展示的是同一套 post-card 列表，
   尺寸统一按参考站：容器左右留白 0.625rem + 内容区 padding 4rem 2rem 3.5rem
   + 负外边距 -2.125rem + 去掉列表外层 .row 的 bootstrap 负外边距
   ========================================================================= */
@media screen and (min-width: 768px) {
    /* 参考站该留白来自其 search.css，这里补成全站一致（未引入 search.css 的页面同样生效） */
    body.card .container {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

body.card #index,
body.card #archive {
    padding: 4rem 2rem 3.5rem;
    margin: -2.125rem;
}

/* 列表外层 .row 的负外边距会把卡片再撑宽 1.25rem；参考站外层用的是无此规则的 .row1 */
body.card .row:has(> #index),
body.card .row:has(> #archive) {
    margin-left: 0;
    margin-right: 0;
}

/* 移动端：各列表页内联块给的是 3rem 左右内边距、主题给的是 25px 容器留白，统一成与桌面同一套几何 */
@media (max-width: 767px) {
    body.card .container {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    body.card #index,
    body.card #archive {
        /* 页面内联块里的 3rem 会盖掉统一值，同一套列表在不同页面宽度就会不一致，这里显式覆盖 */
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        margin: -2.125rem;
    }
}

/* ≤336px 的矮卡片档位：主题里 `height:12.5rem!important` 把页面这一档压掉了，这里补回参考站的 10.5rem */
@media (max-width: 336px) {

    body.card #index article .post-card-mask,
    body.card #archive article .post-card-mask {
        height: 10.5rem !important;
    }

    /* 主题另给 .post-card 自身设了高度（参考站没有这条），会让卡片盒比图片区高出 2rem */
    body.card.theme-dark #index article .post-card,
    body.card.theme-dark #archive article .post-card {
        height: 10.5rem !important;
    }
}

/* ==========================================================================
   热门推荐（xqbj-recommand-list-cotainer）—— 详情页「热门推荐」模块
   原独立文件 usr/themes/Mirages/css/7.10.0/recommand.css 于 20261110 并入本文件。
   样式代码从参考站 cgw/usr/themes/Mirages/css/7.10.0/search.css 原样移植：
   主块 = 原 2577-2772 行；随后的「同名覆盖块」= 原 2865-2957 行（参考站靠文档顺序
   覆盖桌面端标题字号，两块都必须保留才能复现参考站的计算值）。
   依赖：swiper-bundle.min.css（.swiper / .swiper-wrapper / .swiper-slide 基础样式）
   ========================================================================== */
.xqbj-recommand-list-cotainer {
  margin-bottom: 0.875rem;
}
/* 20260706 start */
.xqbj-recommand-list-cotainer.case-index {
  margin-bottom: 1.2rem;
}
/* 20260706 end */
.recommand-wrapper {
  position: relative;
  border-block: 0.8438rem solid transparent;
  border-inline: 0.5938rem solid transparent;
  outline: 0.0625rem solid #555;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  border-radius: 1rem;
  --line-clamp: 3;
  --recommand-item-title-margin-top: 0.2188rem;
}

.xqbj-recommand-list-cotainer .xqbj-recommand-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-block: .7188rem; */
  margin-top: 1.5625rem;
  margin-bottom: 0.875rem;
}

.xqbj-recommand-list-cotainer .recommand-wrapper {
  padding-top: 0.3rem;
}

.xqbj-recommand-list-cotainer.case-index .xqbj-recommand-title {
  margin-top: 1.0625rem;
  margin-bottom: 0.625rem;
}

.xqbj-recommand-list-cotainer .xqbj-recommand-title > h2 {
  font-weight: 600;
  font-size: 1rem;
}

.xqbj-recommand-list {
  display: flex;
  flex-wrap: nowrap;
  height: auto;
}

.xqbj-recommand-list .xqbj-recommand-item-banner {
  position: relative;
  padding-bottom: 58%;
  height: 0;
}

.xqbj-recommand-list
  .xqbj-recommand-item-banner
  .xqbj-recommand-item-banner-mesosphere {
  position: absolute;
  overflow: hidden;
  border-radius: 0.1875rem;

  inset: 0;
}

.xqbj-recommand-list
  .xqbj-recommand-item-banner
  .xqbj-recommand-item-banner-mesosphere
  > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xqbj-recommand-list .xqbj-recommand-item-title {
  /* margin-top: .2188rem; */
  margin-top: var(--recommand-item-title-margin-top);
  font-size: inherit;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;

  -webkit-line-clamp: var(--line-clamp);
  line-clamp: var(--line-clamp);
  box-orient: vertical;
  color: #fff;
}

.custom-swiper-button-prev {
  position: absolute;
  top: 0;
  bottom: calc(
    var(--line-clamp) * 1em + var(--recommand-item-title-margin-top)
  );
  margin: auto;
  left: -0.3125rem;
  width: 1.1687rem;
  height: 1.1687rem;
  z-index: 10;
  cursor: pointer;
}

.custom-swiper-button-next {
  position: absolute;
  top: 0;
  bottom: calc(
    var(--line-clamp) * 1em + var(--recommand-item-title-margin-top)
  );
  margin: auto;
  right: -0.3125rem;
  width: 1.1687rem;
  height: 1.1687rem;
  z-index: 10;
  cursor: pointer;
}

.xqbj-recommand-list-cotainer .custom-swiper-button-prev.swiper-button-disabled,
.xqbj-recommand-list-cotainer .custom-swiper-button-next.swiper-button-disabled {
  display: none;
}

.custom-swiper-button-prev img,
.custom-swiper-button-next img {
  display: block;
  width: 100%;
  height: 100%;
}
/* H5 end */

@media (min-width: 768px) {
  /* PC start */
  .xqbj-icon-back {
    width: 0.625rem;
    height: 0.625rem;
  }

  .xqbj-recommand-list-cotainer {
    margin-bottom: 1rem;
  }

  .recommand-wrapper {
    border: 1.2188rem solid transparent;
    border-radius: 0.9063rem;
    font-size: 0.875rem;
    --line-clamp: 2;
    --recommand-item-title-margin-top: 0.4625rem;
  }

  .xqbj-recommand-list-cotainer.case-index .xqbj-recommand-title {
    margin-top: 0.8625rem;
    margin-bottom: 0.8625rem;
  }

  .xqbj-recommand-list-cotainer .xqbj-recommand-title {
    margin-top: 1.3125rem;
    margin-bottom: 0.8125rem;
  }

  .xqbj-recommand-list-cotainer .xqbj-recommand-title > h2 {
    font-size: 1.125rem;
  }

  .xqbj-recommand-list .xqbj-recommand-item-title {
    /* margin-top: .5rem;
            margin-bottom: .3125rem; */
    margin-top: var(--recommand-item-title-margin-top);
    /* margin-top: .4625rem; */
    font-size: inherit;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;

    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp);
    box-orient: vertical;
  }

  .custom-swiper-button-prev {
    left: -0.75rem;
    width: 1.9187rem;
    height: 1.9187rem;
  }

  .custom-swiper-button-next {
    right: -0.75rem;
    width: 1.9187rem;
    height: 1.9187rem;
  }
  /* PC end */
}

/* ==========================================================================
   以下是参考站 search.css 同文件中位于后方的同名模块覆盖块（原 2865-2957 行）。
   它按文档顺序排在前面那块之后，因而在桌面端会覆盖前面的 @media 声明
   （例如 .xqbj-recommand-title > h2 在参考站实际计算为 1rem 而不是 1.125rem）。
   为保证本项目与参考站渲染结果一致，原样保留。
   ========================================================================== */
.xqbj-recommand-list-cotainer .xqbj-recommand-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 0.7188rem;
}

.xqbj-recommand-list-cotainer .xqbj-recommand-title > h2 {
  font-size: 1rem;
  font-weight: 600;
}

.xqbj-recommand-title .xqbj-recommand-title-right {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.xqbj-recommand-title .xqbj-recommand-title-right .xqbj-recommand-switch-text {
  font-size: 0.875rem;
  color: #888;
  margin-right: 0.4688rem;
}

.xqbj-recommand-title .xqbj-recommand-title-right .xqbj-recommand-switch-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.xqbj-recommand-title
  .xqbj-recommand-title-right
  .xqbj-recommand-switch-icon
  img {
  display: block;
  width: 100%;
  height: 100%;
}

/*.xqbj-recommand-list {*/
/*    --recommand-item-gap: .7188rem;*/
/*    --recommand-perline-count: 2;*/
/*    display: grid;*/
/*    gap: var(--recommand-item-gap);*/
/*    grid-template-columns: repeat(var( --recommand-perline-count), minmax(0, 1fr));*/
/*}*/

.xqbj-recommand-list .xqbj-recommand-list-item {
  display: flex;
  flex-direction: column;
  border-bottom-color: transparent !important;
}

.xqbj-recommand-list .xqbj-recommand-item-banner {
  position: relative;
  height: 0;
  padding-bottom: 58%;
}

.xqbj-recommand-list
  .xqbj-recommand-item-banner
  .xqbj-recommand-item-banner-mesosphere {
  overflow: hidden;
  position: absolute;
  inset: 0;
  border-radius: 0.1875rem;
}

.xqbj-recommand-list
  .xqbj-recommand-item-banner
  .xqbj-recommand-item-banner-mesosphere
  > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.xqbj-recommand-list .xqbj-recommand-item-title {
  margin-top: 0.6563rem;
  margin-bottom: 0.2813rem;
  font-size: 0.875rem;
  color: #fff;
}

.xqbj-recommand-list .xqbj-recommand-item-info {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 0;
  color: #979797;
  font-size: 0.7188rem;
}

/* ===================== 20261110 post-card 卡片比例 1000×350 =====================
   卡片盒按 1000:350（2.857:1）随宽度自适应，不再固定 248px / 200px / 168px 的写死高度。
   封面图用 cover 裁切填满（后端原图为 1300×640，与本比例不同，上下会被轻微裁掉）。
   作用域：首页 #index 与列表页 #archive 下的所有 post-card（普通卡与广告卡一致）。
   仅排除搜索结果行（位于 .container.search-container 内，行高压成 76/109px 的紧凑样式）。 */
body.card .container:not(.search-container) #index article .post-card,
body.card .container:not(.search-container) #archive article .post-card {
    height: auto !important;
    aspect-ratio: 1000 / 350;
}

/* 封面图绝对定位填满卡片盒：主题的 img{width:100%;height:100%} 依赖父级有确定高度，
   改成 aspect-ratio 后百分比高度在部分浏览器下会退回图片原高（640px），故显式撑满。
   广告卡的 img.banner 同样适用（cover 裁切，保持同一比例）。 */
body.card .container:not(.search-container) #index article .post-card > img,
body.card .container:not(.search-container) #archive article .post-card > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 遮罩层（标题条 / 广告标签容器）必须与卡片盒等高，否则窄屏会溢出（375 下卡片仅 119px 高，
   而主题把 mask 写死 12.5rem = 141px）。
   三个条件缺一不可，实测逐个试出来的：
     1. `height:auto !important` —— 主题的 15.5rem / 12.5rem 都带 !important，必须同等提权；
        但光有 auto 不够，mask 会缩成内容高度（首页实测变成 0/32px）。
     2. `top:0 + bottom:0` —— 绝对定位元素上下都固定时才由包含块拉伸；
     3. `display:block !important` —— 主题给的是 `display:table`，table 盒忽略 top/bottom
        拉伸、仍按内容收缩，必须改成 block。
   注意 `height:100%` 在这里不可用：卡片是 aspect-ratio 高度 + `transition:.3s ease all`，
   百分比在过渡期间解析不到稳定基准，实测一直停在旧值。 */
body.card .container:not(.search-container) #index#index article .post-card[class] > .post-card-mask,
body.card .container:not(.search-container) #archive#archive article .post-card[class] > .post-card-mask {
    height: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
}

/* ===================== 20261110 横向滚动条修复（全站，含首页） =====================
   现象：所有页面都有一条 8px 的横向滚动条（包括没有播放器的首页）。

   根因/滚动模型（本主题比较特殊，务必先看清再动）：
     · html{overflow:hidden} 且 html.scrollHeight 恒等于视口高度；
     · **body 才是真正的滚动容器**（body{overflow:auto}，scrollHeight 两万多）；
     · 主题 `body.desktop.chrome #wrap { margin: 0 -10px }` 使 #wrap 比 body 宽 20px
       （1440 视口：body clientWidth 1432，body scrollWidth 1442 → 横向滚动条 8px）。
   所以要在**溢出真正发生的那一层 —— body** 上收掉水平方向。

   用 clip 而不是 hidden：
     · hidden 会让 body 变成「可滚动但无条」，仍需吞掉 20px；
     · clip 直接禁止水平滚动，且**不会**改变垂直滚动（实测 body.scrollHeight 保持 22836，
       滚轮/触摸上下滚动正常）。
   注意：不要给 html 设 overflow-x:hidden + overflow-y:auto/hidden 的组合，实测会把
   文档高度塌成视口高度、整页无法上下滚动。 */
body.card {
    overflow-x: clip !important;
}

/* 详情页补充：为了让 DPlayer 进度条正常，上面有一条规则把 html 的 overflow 放开
   （html:has(body.desktop .dplayer){overflow:visible!important}），此时 html 也会
   暴露同样的 20px 溢出。这里只裁水平方向；overflow-y 保持 visible 不动 ——
   一旦给 html 设 overflow-y:auto/hidden，文档高度会塌成视口高度、整页不能滚动。 */
html:has(body.desktop .dplayer) {
    overflow-x: clip !important;
}

/* ===================== 20261110 卡片纵向间距收紧 =====================
   卡片高度改成 1000:350 比例后（桌面 848×296.8），article 原有的
   上下 padding（桌面 32+20、移动 15+20）叠起来让列表看起来过于疏松，这里统一收紧。
   作用域与比例规则一致：首页 #index / 列表页 #archive，排除搜索结果行。 */
body.card .container:not(.search-container) #index article,
body.card .container:not(.search-container) #archive article {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

@media (max-width: 767px) {
    body.card .container:not(.search-container) #index article,
    body.card .container:not(.search-container) #archive article {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* ===================== 20261110 详情页容器宽度对齐首页 =====================
   首页的容器断点写在 index.php 的内联 <style> 里；详情页（archives/*）没有这段，
   于是整页被主题的 max-width:949px 钉死，比首页宽（1440 视口 949 vs 864）。
   这里把同一套断点提到 common.css，让详情页与首页同宽。
   说明：`.container.search-container`（搜索页容器）不受影响 —— 它由 search.css 里
   `body.card:not(:has(#index)):not(:has(#archive)) .container` 那条自行控制宽度。 */
@media screen and (max-width: 767.98px) {
    body.card .container {
        max-width: 710px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1301px) {
    body.card .container {
        max-width: 720px;
    }
}

@media screen and (min-width: 1302px) and (max-width: 1599px) {
    body.card .container {
        max-width: 864px;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1799px) {
    body.card .container {
        max-width: 896px;
    }
}

@media screen and (min-width: 1800px) and (max-width: 1999px) {
    body.card .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 2000px) and (max-width: 2399px) {
    body.card .container {
        max-width: 992px;
    }
}

@media screen and (min-width: 2400px) {
    body.card .container {
        max-width: 1024px;
    }
}

/* ===================== 20261110 详情页 #wrap 负边距归零 =====================
   375 视口下详情页容器比首页宽 11px，根因不在 .container 断点（两边 max-width 都是 710），
   而在 #wrap：
     · 详情页快照的 body 类是 `desktop chrome`，命中主题
       `body.desktop.chrome #wrap { margin: 0 -10px }` → #wrap 宽 387 > 视口 375；
     · 首页快照的 body 类是 `mobile phone safari`，不命中该规则 → #wrap 宽 375。
   把负边距归零后两边 #wrap 同宽，移动端容器也就对齐了（桌面端本就都是 1452，不受影响）。
   注：这条同时消除了详情页 20px 的横向溢出源，见上文「横向滚动条修复」。 */
/* 特异性要与主题的 `body.desktop.chrome #wrap`（0-3-1）对齐并更强，
   `body.card #wrap` 只有 0-2-1，压不过它。 */
body.card.desktop #wrap,
body.card.mobile #wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* 关键：主题同时给了 width:calc(100% + 20px)，只归零 margin 仍会宽出 20px */
    width: 100% !important;
}