/* ==========================================================================
   UI Polish · 视觉统一与交互优化  v1.5.0
   作用范围：全站前台。通过设计令牌统一风格，增强组件状态反馈与响应式表现。
   v1.0.1 修复：
   - 移除 header 的 backdrop-filter（会使 position:fixed 的子元素——移动端
     抽屉菜单 .mobile-navbar 等——定位基准从视口变为 header，导致菜单错乱）
   - 移除通用 .card 的悬浮位移与全局入场动画（避免 AJAX 列表/弹层冲突及
     transform 产生的包含块副作用）
   - 导航指示条规则去重合并
   - 移动端不再强制按钮 inline-flex（避免图标按钮/加载态错位）
   ========================================================================== */

/* ---------- 1. 设计令牌：配色 / 字体 / 间距 / 圆角 / 阴影 ---------- */
:root {
  /* 主色统一为 #627bf5：与后台主题设置一致，beauty.css / article-banner 已同步收敛到本令牌 */
  --theme-color: #627bf5;
  --ui-primary: #627bf5;
  --ui-primary-hover: #4b63e0;
  --ui-primary-active: #3a4fc4;
  --ui-primary-soft: rgba(98, 123, 245, .1);
  --ui-ring: rgba(98, 123, 245, .28);

  --ui-success: #18a058;
  --ui-warning: #f0a020;
  --ui-danger: #e0483e;

  --ui-text-1: #1c2333;
  --ui-text-2: #4b5468;
  --ui-text-3: #8a93a6;
  --ui-bg: #f5f7fb;
  --ui-card-bg: #ffffff;
  --ui-border: #e6e9f2;

  --ui-radius-sm: 6px;
  --ui-radius: 10px;
  --ui-radius-lg: 14px;
  --ui-radius-xl: 20px;

  --ui-shadow-sm: 0 1px 2px rgba(23, 32, 64, .05), 0 1px 6px rgba(23, 32, 64, .06);
  --ui-shadow-md: 0 4px 14px rgba(23, 32, 64, .08), 0 2px 6px rgba(23, 32, 64, .05);
  --ui-shadow-lg: 0 12px 32px rgba(23, 32, 64, .14), 0 4px 12px rgba(23, 32, 64, .07);

  --ui-ease: cubic-bezier(.22, .8, .32, 1);
  --ui-dur: .22s;

  --focus-shadow-color: var(--ui-ring);
  --focus-color-opacity1: rgba(98, 123, 245, .1);
  --focus-color-opacity05: rgba(98, 123, 245, .05);
  --focus-color-opacity3: rgba(98, 123, 245, .3);
  --focus-color-opacity6: rgba(98, 123, 245, .6);
  --main-radius: var(--ui-radius);
}

body.dark-theme {
  --ui-text-1: #e8eaf2;
  --ui-text-2: #b6bcd0;
  --ui-text-3: #7d8499;
  --ui-bg: #171922;
  --ui-card-bg: #1f222e;
  --ui-border: #2c3040;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 6px rgba(0, 0, 0, .28);
  --ui-shadow-md: 0 4px 14px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .3);
  --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .36);
}

/* ---------- 2. 字体与排版 ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.7;
  letter-spacing: .01em;
}

h1, h2, h3, h4, h5, h6,
.item-heading, .posts-item .item-heading {
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}

::selection {
  background: var(--ui-primary);
  color: #fff;
}

/* ---------- 3. 全局焦点态：键盘可达性 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

/* ---------- 4. 按钮：统一过渡 / 悬浮 / 按下 / 禁用 ---------- */
.btn, .but, button[type="submit"], input[type="submit"], input[type="button"] {
  transition: transform var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              background-color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              opacity var(--ui-dur) var(--ui-ease);
}

.btn:not(.disabled):not([disabled]):hover,
.but:not(.disabled):not([disabled]):hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-md);
  filter: brightness(1.04);
}

.btn:not(.disabled):not([disabled]):active,
.but:not(.disabled):not([disabled]):active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--ui-shadow-sm);
  filter: brightness(.96);
}

.btn.disabled, .btn[disabled], .but.disabled, .but[disabled],
button[disabled], input[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- 5. 表单控件：聚焦高亮与状态反馈 ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="tel"], textarea, select, .form-control {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  transition: border-color var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              background-color var(--ui-dur) var(--ui-ease);
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-ring);
  outline: none;
}

::placeholder { color: var(--ui-text-3); opacity: .9; }

/* ---------- 6. 导航：悬浮态（不做任何横线指示，仅文字变色） ---------- */
.navbar-nav > li > a {
  transition: color var(--ui-dur) var(--ui-ease),
              background-color var(--ui-dur) var(--ui-ease);
}

.navbar-nav > li > a:hover {
  color: var(--ui-primary);
}

/* 主题自带的悬停顶部横条（.navbar-nav > li:before 5px 圆角条）一并取消 */
.navbar-nav > li:before {
  display: none !important;
}

/* ---------- 7. 文章卡片：统一圆角、阴影与悬浮层级 ---------- */
.posts-item, .zib-widget, .box-body,
.main-search, .header-slider-container {
  border-radius: var(--ui-radius-lg);
}

.posts-item {
  transition: transform .28s var(--ui-ease),
              box-shadow .28s var(--ui-ease);
}

.posts-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-lg);
}

/* 卡片封面图缩放反馈（仅作用于文章封面，不影响卡内其他图标） */
.posts-item .item-thumbnail img {
  transition: transform .4s var(--ui-ease);
}
.posts-item:hover .item-thumbnail img {
  transform: scale(1.045);
}

/* 文章标题悬浮变色 */
.posts-item .item-heading a,
.item-heading a {
  transition: color var(--ui-dur) var(--ui-ease);
}
.posts-item:hover .item-heading a {
  color: var(--ui-primary);
}

/* ---------- 8. 链接：统一悬浮反馈 ---------- */
a { transition: color var(--ui-dur) var(--ui-ease); }

/* ---------- 9. 分页 / 标签 / 徽章 ---------- */
.pagination a, .pagination span,
.page-numbers, .tag-cloud a, .badge {
  border-radius: var(--ui-radius-sm);
  transition: all var(--ui-dur) var(--ui-ease);
}
.pagination a:hover, .page-numbers:hover {
  background: var(--ui-primary);
  color: #fff;
  border-color: var(--ui-primary);
}

/* ---------- 10. 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(130, 140, 170, .45);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(130, 140, 170, .75); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 11. 页脚 ---------- */
.footer, .footer2 {
  border-top: 1px solid var(--ui-border);
}
.footer a:hover, .footer2 a:hover { color: var(--ui-primary); }

/* ---------- 12. 响应式：平板与手机 ---------- */
@media (max-width: 991px) {
  body { line-height: 1.65; }

  /* 触屏设备取消卡片位移，避免误触错觉，保留轻微阴影反馈 */
  .posts-item:hover {
    transform: none;
    box-shadow: var(--ui-shadow-md);
  }

  .container { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 767px) {
  .posts-item, .zib-widget { border-radius: var(--ui-radius); }

  /* 触屏可点区域：仅加大导航链接，不改动按钮布局方式 */
  .navbar-nav > li > a,
  .mobile-navbar a {
    min-height: 40px;
  }

  /* 移动端标题层级收紧，提升信息密度 */
  h1, .item-heading { font-size: 1.18em; }

  /* 文本类输入框字号 16px，防 iOS 聚焦自动缩放（不含 checkbox/radio 等） */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="url"],
  input[type="tel"], textarea, select {
    font-size: 16px;
  }

  .navbar-nav > li > a::after { bottom: 4px; }
}

/* ---------- 13. 降低动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   v1.1.0 全站细节优化（弹窗 / 下拉层 / 正文排版 / 评论 / 抽屉菜单 / 悬浮件）
   ========================================================================== */

/* ---------- 14. 弹窗（登录/注册/支付等 .modal） ---------- */
.modal-content {
  border: none;
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
}

.modal-backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 弹窗打开动画：轻微上浮 + 淡入 */
.modal.show .modal-dialog, .modal.in .modal-dialog {
  animation: ui-modal-in .3s var(--ui-ease) both;
}
@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 弹窗关闭按钮反馈 */
.modal .close, .modal .modal-close, [data-dismiss="modal"] {
  transition: transform var(--ui-dur) var(--ui-ease),
              opacity var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease);
}
.modal .close:hover, .modal .modal-close:hover, [data-dismiss="modal"]:hover {
  transform: rotate(90deg);
  opacity: 1;
}

/* 弹窗内标签页（登录/注册切换）激活态 */
.modal .nav-tabs > li > a, .sign-tab a, .modal .tab-link {
  transition: color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease);
}

/* ---------- 15. 下拉层（用户菜单 / 导航下拉 / hover 弹层） ---------- */
.hover-show-con, .dropdown-menu, .sub-menu {
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-lg);
  border: 1px solid var(--ui-border);
}

.hover-show-con a, .dropdown-menu > li > a, .sub-menu a {
  border-radius: var(--ui-radius-sm);
  transition: background-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              padding var(--ui-dur) var(--ui-ease);
}

.hover-show-con a:hover, .dropdown-menu > li > a:hover, .sub-menu a:hover {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
}

/* ---------- 16. 移动端抽屉菜单 ---------- */
.mobile-navbar a {
  border-radius: var(--ui-radius-sm);
  transition: background-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease);
}
.mobile-navbar a:hover, .mobile-navbar a:active {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
}
.mobile-navbar .sub-menu a, .mobile-navbar .menu-item-has-children ul a {
  border-radius: var(--ui-radius-sm);
}
/* 抽屉内当前菜单高亮 */
.mobile-navbar .current-menu-item > a,
.mobile-navbar .current-menu-ancestor > a {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

/* ---------- 17. 文章正文排版 ---------- */
.article-content, .wp-posts-content, .single-content, .post-content {
  font-size: 15.5px;
  line-height: 1.85;
}
.article-content p, .wp-posts-content p, .single-content p, .post-content p {
  margin-bottom: 1.1em;
}
.article-content img, .wp-posts-content img, .single-content img, .post-content img {
  border-radius: var(--ui-radius);
}
/* 引用块 */
.article-content blockquote, .wp-posts-content blockquote,
.single-content blockquote, .post-content blockquote, blockquote {
  border-left: 3px solid var(--ui-primary);
  background: var(--ui-primary-soft);
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  padding: 12px 16px;
}
/* 行内代码与代码块 */
code, pre {
  border-radius: var(--ui-radius-sm);
}
pre {
  border: 1px solid var(--ui-border);
  padding: 14px 16px;
  line-height: 1.7;
}
/* 正文表格 */
.article-content table, .wp-posts-content table, .post-content table {
  border-radius: var(--ui-radius-sm);
  overflow: hidden;
}
.article-content table th, .wp-posts-content table th, .post-content table th {
  background: var(--ui-primary-soft);
}

/* ---------- 18. 评论区 ---------- */
.commentlist .comment, .comment-body, .comment-box {
  border-radius: var(--ui-radius);
}
.comment-textarea textarea, .comment-form textarea {
  border-radius: var(--ui-radius);
}
.comdets a, .comment-reply-link, .comment-meta a {
  transition: color var(--ui-dur) var(--ui-ease);
}
.comdets a:hover, .comment-reply-link:hover {
  color: var(--ui-primary);
}

/* ---------- 19. 文章元信息标签 / 话题标签 chips ---------- */
.item-metas .meta-classify, .item-metas a, .post-tag a,
.tags a, .article-tag a {
  border-radius: var(--ui-radius-sm);
  transition: background-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease);
}
.item-metas a:hover, .post-tag a:hover, .tags a:hover, .article-tag a:hover {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

/* ---------- 20. 搜索浮层 ---------- */
.main-search input[type="text"], .main-search input[type="search"], .search-input {
  border-radius: var(--ui-radius);
}
.main-search .hot-tags a, .main-search .search-hot a {
  border-radius: 999px;
  transition: all var(--ui-dur) var(--ui-ease);
}
.main-search .hot-tags a:hover, .main-search .search-hot a:hover {
  background: var(--ui-primary);
  color: #fff;
}

/* ---------- 21. 右下角悬浮按钮（回顶/深色切换等） ---------- */
.float-right-bar a, .float-bar a, .rollbar a, .right-bar a,
.back-to-top, .gotop, [class*="rollbar"] > * {
  transition: transform var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              background-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease);
}
.float-right-bar a:hover, .float-bar a:hover, .rollbar a:hover,
.right-bar a:hover, .back-to-top:hover, .gotop:hover {
  transform: translateY(-2px);
  color: var(--ui-primary);
}

/* ---------- 22. 作者页 / 用户卡片 ---------- */
.author-avatar img, .user-card .avatar img, .avatar-img {
  transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease);
}
.author-avatar:hover img, .user-card .avatar:hover img {
  transform: scale(1.04);
}

/* ---------- 23. 面包屑与页头 ---------- */
.breadcrumb a, .crumbs a {
  transition: color var(--ui-dur) var(--ui-ease);
}
.breadcrumb a:hover, .crumbs a:hover { color: var(--ui-primary); }

/* ---------- 24. 加载态（按钮 loader 期间防止重复点击抖动） ---------- */
.but.loading, .btn.loading, .signsubmit-loader.loading {
  opacity: .75;
  pointer-events: none;
}

/* ---------- 25. 会员开通条 / 强调卡片 ---------- */
.vip-card, .payvip-icon {
  transition: transform var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              filter var(--ui-dur) var(--ui-ease);
}
.vip-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ---------- 27. 移动端触屏目标放大（可用性与无障碍） ---------- */
@media (max-width: 991px) {
  /* 元信息、标签、页脚等小链接在触屏上加大可点区域 */
  .item-metas a, .posts-item .meta-classify, .footer a, .footer2 a,
  .tag-cloud a, .pagination a, .page-numbers, .comment-meta a,
  .mobile-navbar .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 767px) {
  .item-metas a, .posts-item .meta-classify, .footer a, .footer2 a,
  .tag-cloud a, .pagination a, .page-numbers {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* 侧栏小按钮/图标按钮至少 40px 可点区域 */
  .zib-widget .btn, .zib-widget .but, .btn-block, .but.radius,
  .zib-widget a.badg, .icon-cover-icon {
    min-height: 40px;
  }
  .zib-widget .btn, .zib-widget .but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- 28. 空状态 / 404 兜底引导 ---------- */
/* 让「暂无内容」等空状态更友好：留出呼吸感 + 弱化边框 */
.ajax-empty, .zib-empty, .no-content, .posts-empty,
.text-center > .muted-color {
  padding: 28px 16px;
}
.ui-empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--ui-text-3);
}

/* 404 引导块 */
.ui-404-guide {
  margin: 0 auto 24px;
  padding: 24px 22px;
  text-align: center;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-border);
}
.ui-404-guide .ui-404-desc {
  margin: 0 0 16px;
  color: var(--ui-text-2);
  font-size: 15px;
}
.ui-404-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ui-404-actions .but {
  min-width: 128px;
  padding: 10px 18px;
}

/* ---------- 27. 裂图兜底：未配置资源的占位图（src 为空）不再显示破图图标 ---------- */
img.zdm-img-void[src=""], img[src=""].zdm-img-void,
img.pay-sys[src=""], img[src=""].pay-qrcode {
  display: none;
}
/* 占位隐藏后，给支付区块留出可点击的文字按钮空间 */
.pay-sys-img:empty, .pay-qrcode-img:empty {
  display: none;
}

/* ---------- 26. 小屏弹窗适配 ---------- */
@media (max-width: 767px) {
  .modal-content { border-radius: var(--ui-radius-lg); }
  .modal-dialog { margin: 12px; }
  .modal.show .modal-dialog, .modal.in .modal-dialog {
    animation-name: ui-modal-in-m;
  }
  .article-content, .wp-posts-content, .single-content, .post-content {
    font-size: 15px;
    line-height: 1.8;
  }
  blockquote { padding: 10px 14px; }
}
@keyframes ui-modal-in-m {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   v1.4.0 渲染层修复：图标 SVG 化、裁切、亚像素、transform 取整、阴影清理
   ========================================================================== */

/* ---------- 29. SVG 图标统一对齐 ---------- */
/* 与 FA 字体相同基线：高 1em，垂直方向 -0.125em */
.svg-inline--fa, .fa-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  overflow: visible;
  flex-shrink: 0;
  transform-origin: center;
  shape-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-svg.fa-fw { width: 1.25em; text-align: center; }
.fa-svg.fa-lg { width: 1.333em; height: 1.333em; }
.fa-svg.fa-2x { width: 2em; height: 2em; }
.fa-svg.fa-3x { width: 3em; height: 3em; }
.fa-svg.fa-xs { width: 0.75em; height: 0.75em; }
.fa-svg.fa-sm { width: 0.875em; height: 0.875em; }
.fa-svg.fa-spin { animation: fa-svg-spin 2s linear infinite; }
@keyframes fa-svg-spin { to { transform: rotate(360deg); } }
.fa-svg.fa-rotate-90 { transform: rotate(90deg); }
.fa-svg.fa-rotate-180 { transform: rotate(180deg); }
.fa-svg.fa-rotate-270 { transform: rotate(270deg); }
.fa-svg.fa-flip-horizontal { transform: scaleX(-1); }
.fa-svg.fa-flip-vertical { transform: scaleY(-1); }
/* 主题切换按钮、fa-lock 等保留字体的图标，仍走字体但启抗锯齿 */
.fa.fa-toggle-theme,
i.fa-lock, i.fa-growing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform: translateZ(0);
}
/* 防止替换后的 SVG 接管父级的 fa-fw 等修饰类造成宽度抖动：保留原 i 的尺寸类 */
.fa-svg.em09 { width: 0.9em; height: 0.9em; }
.fa-svg.em10 { width: 1em; height: 1em; }
.fa-svg.em11 { width: 1.1em; height: 1.1em; }
.fa-svg.em12 { width: 1.2em; height: 1.2em; }
.fa-svg.em13 { width: 1.3em; height: 1.3em; }
.fa-svg.em14 { width: 1.4em; height: 1.4em; }
.fa-svg.em18 { width: 1.8em; height: 1.8em; }
.fa-svg.ml3, .fa-svg.ml6, .fa-svg.ml10, .fa-svg.mr6, .fa-svg.mr10 {
  width: 1em; height: 1em;
}

/* ---------- 30. 边缘裁切修复 ---------- */
/* 1) VIP 卡片：内容被裁 132×50 — 改为 overflow:visible，给文字 flex 排版 */
.vip-card {
  overflow: visible;
}
.vip-card .vip-card-title,
.vip-card .vip-card-desc {
  white-space: normal;
  overflow: visible;
}
/* 让卡片内的徽章/标签自动换行而非裁切 */
.vip-card .badge,
.vip-card .tag-list,
.vip-card .mini-tag {
  white-space: nowrap;
  max-width: 100%;
}

/* 2) 登录按钮：文字被裁 9x16 — 给按钮足够内边距，不裁字 */
.signin-loader.but,
.but.jb-red,
.but.jb-blue,
.but.jb-green {
  overflow: visible;
  white-space: nowrap;
  line-height: 1.4;
  padding-left: 1em;
  padding-right: 1em;
}

/* 3) 轮播图文卡片：图被裁 75px — 用 object-fit:cover 而非 overflow:hidden 拉伸 */
.graphic.hover-zoom-img {
  overflow: hidden; /* 保留 hidden 是 hover 图片放大的需要 */
}
.graphic.hover-zoom-img .fit-cover,
.graphic.hover-zoom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 4) 图文标题：absolute 在图上的浮层文字，不要被父级 hidden 裁掉 */
.graphic .graphic-text {
  overflow: visible !important;
  white-space: normal !important;
  max-width: none !important;
  width: auto;
}
/* 让标题换行而非裁切；同时保持多行版本 + 二行版本视觉一致 */
.graphic .abs-center.left-bottom.graphic-text,
.graphic .abs-center.abs-center.left-bottom,
.graphic .left-bottom.graphic-text {
  white-space: normal !important;
  max-width: 100% !important;
  width: 100%;
  left: 0;
  transform: none !important;
}
/* 标题字号小一点让小卡片也容得下 */
.graphic .graphic-text .em09,
.graphic .em09.opacity8,
.graphic .px12.opacity8.mt6 {
  font-size: 12px;
  line-height: 1.35;
}
/* 5) 横向滚动 swiper 容器保留裁切（设计上有意），但给内层 item 留呼吸空间 */
.swiper-container.swiper-scroll .swiper-wrapper {
  padding: 2px 0;
}

/* ---------- 31. 亚像素几何取整 ---------- */
/* 用 round() 对关键定位类取整，规避字体渲染与布局半像素偏移 */
.header .navbar-logo,
.navbar-nav > li > a,
.posts-item .item-thumbnail img,
.posts-item .item-heading a,
.main-search input,
.breadcrumb,
.pagination a, .page-numbers,
.item-metas a, .tag-cloud a,
.modal-content, .dropdown-menu,
.hover-show-con, .sub-menu {
  transform: translateZ(0);
}
/* 旧位移造成的 0.5px：用 round 改为整数位 */
.posts-item:hover {
  transform: translateY(-3px) translateZ(0) !important;
}
.btn:not(.disabled):not([disabled]):hover,
.but:not(.disabled):not([disabled]):hover {
  transform: translateY(-1px) translateZ(0);
}
/* 高分屏下避免次像素模糊：行内 svg 文本统一像素对齐 */
.fa-svg path { shape-rendering: geometricPrecision; }

/* ---------- 32. 清理多余 text-shadow / 滤镜造成的重影与彩边 ---------- */
/* 搜索热词上的 0 0 0 阴影是无意义的伪粗体，会产生彩边 */
a.search_keywords.muted-2-color.but {
  text-shadow: none !important;
}
/* 轮播图蒙版的微辉光在低 DPI 下会糊，移除并改用纯渐变遮罩 */
.graphic.hover-zoom-img.style-3,
.graphic.hover-zoom-img img,
.graphic .abs-center.left-bottom.graphic-text,
.graphic .em09.opacity8,
.graphic .px12.opacity8.mt6 {
  text-shadow: none !important;
}
/* SVG 图标继承父级 text-shadow 会变成重影：路径本身不应继承 */
svg, svg use {
  text-shadow: none !important;
}
/* 圆角按钮的 text-shadow 用于浮起感观，但叠加文字颜色像重影 */
a.but.jb-blue.radius,
button.but.jb-blue.radius,
a.but.jb-red.radius,
button.but.jb-red.radius,
a.but.jb-green.radius {
  text-shadow: none !important;
}
/* 头部 banner 文字阴影清理 */
.zdm-artbanner {
  text-shadow: none !important;
}

/* ---------- 33. 字体平滑：全局开启与强制整行渲染 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body, input, button, textarea, select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题与小数字号下避免次像素模糊，开启子像素布局优化 */
h1, h2, h3, h4, .item-heading, .posts-item .item-heading,
.badge, .num, .post-tag a, .tags a {
  text-rendering: geometricPrecision;
}

/* ---------- 34. 整数 transform 规则（CSS 取整兜底） ---------- */
.float-right-bar a:hover, .float-bar a:hover, .rollbar a:hover,
.right-bar a:hover, .back-to-top:hover, .gotop:hover,
.vip-card:hover, .author-avatar:hover img,
.modal .close:hover, .modal .modal-close:hover, [data-dismiss="modal"]:hover,
.posts-item:hover .item-thumbnail img,
.posts-item .item-thumbnail img {
  /* 确保使用整数位移；translateZ(0) 触发合成层，规避重排抖动 */
  will-change: transform;
}

/* ---------- 35. 图标字体兜底：在 SVG 注入完成前避免框内空白 ---------- */
i.fa {
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
}

/* ---------- 36. 背景图形裁切适配 ---------- */
/* 图标位图背景（i.thumb 缩略图）使用 contain 模式，需保证容器比例正确 */
i.thumb {
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/* 后台主题图标动画上下浮动保持整数位 */
@keyframes fa-bounce-safe {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-2px) translateZ(0); }
}

/* ---------- 37. 文章页通栏横幅：fit() 幂等校正适配 ---------- */
/* 插件 fit() 已改为幂等增量校正（cur - rect.left），不再依赖「写后即读」即时性，
   因此无需禁用过渡/动画。仅保留对横幅自身的 transition:none 保险，
   波浪流动动画（zdm-bn-wavelayer 用 transform 横向滚动，不触发重排、不影响
   banner 自身的 getBoundingClientRect）完全保留，呈现"河水流动"效果。 */
.zdm-artbanner,
.zdm-cdbar {
  transition: none !important;
}

/* 波浪"河水流动"动画：用户明确要求持续流动效果，
   强制覆盖 prefers-reduced-motion 全局压缩规则（第 28 节把动画缩到 0.01ms），
   用 transform 而非 margin/width，保证不影响 fit() 校正读取。 */
.zdm-artbanner .zdm-bn-wavelayer {
  animation-name: zdm-wave-move !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: none !important;
  will-change: transform;
}
.zdm-artbanner .zdm-bn-wavelayer.zdm-wl-back {
  animation-duration: 13s !important;
  animation-delay: 0s !important;
}
.zdm-artbanner .zdm-bn-wavelayer.zdm-wl-front {
  animation-duration: 8s !important;
  animation-delay: -4s !important;
}

/* ---------- 38. SVG 图标与文字间距修正 ---------- */
/* 原 FA 字体字形右侧有天然留白；换成紧贴 viewBox 的 SVG 后图标会顶到文字。
   替换脚本在「图标后面紧跟文本」时就地打 fa-svg-adj 标记类，
   此处统一补回间距；flex gap / 纯图标场景不受影响。 */
svg.fa-svg.fa-svg-adj {
  margin-inline-end: 0.32em;
}
.zdm-bn-item .fa-svg,
.zdm-bn-meta .fa-svg {
  vertical-align: -0.15em;
}

/* ---------- 39. 图标尺寸归一与点赞按钮视觉强化（v1.4.6）---------- */
/* 根因：文章底部 .post-actions 内的 svg.icon 无显式尺寸，被 flex/块布局拉伸成
   80×24（按钮宽 80、高受行高限制 24）。preserveAspectRatio 默认 xMidYMid meet
   使实际字形仅以 24×24 居中绘制、左右各空 28px，图标偏小不醒目；在深色按钮上
   小尺寸拇指轮廓易被误判为「点踩」。统一等比固定尺寸 + 居中 + 激活态填充。
   v1.4.8：按钮改 flex 纵向布局，修复移动端 inline-block 导致的图标横向偏移。 */
.article .post-actions .action {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.article .post-actions .action > svg.icon,
.article .post-actions .action > .icon {
  width: 24px;
  height: 24px;
  margin: 0 !important;
  display: block;
  flex: 0 0 auto;
}
.article .post-actions .action-share > svg.icon {
  width: 22px;
  height: 22px;
}
/* 文字与计数包进 .act-label 同行显示（JS 注入），baseline 对齐 */
.article .post-actions .action .act-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1.2;
}
.article .post-actions .action .act-label text,
.article .post-actions .action .act-label count {
  display: inline;
  margin: 0;
}
/* 评论区点赞图标（.action-comment-like）尺寸归一，与文字基线对齐 */
.action-comment-like > svg.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

/* 点赞 / 评论点赞 激活态：填充主色，让「已点赞」语义明确，避免方向歧义 */
.action-like.actived,
.action-comment-like.actived {
  color: var(--ui-primary);
}
.action-like.actived > svg.icon,
.action-comment-like.actived > svg.icon {
  fill: var(--ui-primary);
}

/* 底部按钮组 hover 微反馈（不使用 transform 包含块副作用大的位移，
   仅颜色 + 轻微透明度，避免影响相邻 fit/layout） */
.article .post-actions .action {
  transition: color .18s ease, opacity .18s ease, background-color .18s ease;
}
.article .post-actions .action:hover {
  opacity: .92;
}
.article .post-actions .action:active {
  opacity: 1;
}

/* 横向溢出兜底：检测到首页有元素右缘超出视口（多为轮播滑动项，已在
   overflow:hidden 容器内视觉裁切），加 html 级兜底防止意外横向滚动条。
   用 overflow-x:clip 优于 hidden——不创建滚动容器，不影响 position:sticky。 */
html {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

/* 主题 svg.icon 全局基线对齐（与相邻文字垂直居中，消除上下跳动） */
svg.icon {
  vertical-align: -0.15em;
}

/* 小尺寸图标锐化：12-16px 场景几何精度渲染，避免模糊 */
.meta svg.icon,
.zdm-bn-item svg.icon,
.zdm-bn-item svg.fa-svg,
.post-list-meta svg.icon {
  shape-rendering: geometricPrecision;
}

/* ---------- 40. 图标语义说明 ---------- */
/* 面包屑「首页」使用 fa-map-marker（定位图钉）为 Zibll 主题原版设计选择，
   表「当前位置」，属常见约定，保留不改以免引入新图标资源。全站其余图标
   语义经核查与上下文一致（点赞=拇指朝上、浏览=眼睛、评论=气泡、收藏=星等）。 */

/* ---------- 41. 卡片间距与对齐微调 ---------- */
/* 文章卡片网格：统一行/列间距，消除某些断点下的不均 */
@media (min-width: 768px) {
  .post-list .item,
  .posts-wrapper .item {
    margin-bottom: 16px;
  }
}
/* 卡片内 meta 行：图标与数字垂直居中、行高统一 */
.meta,
.post-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.meta > *,
.post-list-meta > * {
  display: inline-flex;
  align-items: center;
}
.meta .meta-like,
.meta .meta-view,
.meta .meta-comment {
  margin-inline-end: 10px;
}

/* ---------- 42. 日夜切换防闪烁 ----------
   主题用 View Transition API 做圆形揭示动画（500ms）。切换瞬间 body 的
   dark-theme 类变更会同时触发全站元素各自的 color/background 过渡
   （约 220ms，含本文件为按钮/链接/表单等添加的过渡），两层动画叠加
   导致闪烁与卡顿感。切换期间（html.theme-switching，由 JS 在捕获阶段
   挂载、700ms 后移除）冻结所有元素过渡，颜色瞬时到位，只保留揭示动画。 */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* View Transition 快照对大面积 backdrop-filter 很敏感，切换期间临时关闭毛玻璃 */
html.theme-switching .blur-bg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}