@charset "utf-8";
/*!
Theme Name: zob
Theme URI: https://01boy.com
Author: 01boy
Author URI: https://01boy.com
Description: Zob is an abbreviation of 01boy.
Tags: blog
Version: 1.0
Requires at least: 6.8.2
Tested up to: 5.4
Requires PHP: 7.0
License: Proprietary
License URI: https://01boy.com/theme-zob-license/
Text Domain: zob
Copyright (C) 2025 01boy.
This theme is exclusive property of 01boy and may not be redistributed without permission.
*/

/* ================================================================================
   ZOB 主题 style.css 模块目录（中文详细注释版）
   --------------------------------------------------------------------------------
   文件说明：
   1. 本文件根据原始 style(5).css 重新整理、排版并增强中文注释。
   2. WordPress 主题头部信息保留在文件最前面，避免主题识别失败。
   3. CSS 规则、选择器、属性和值保持原有级联顺序，不主动重排业务样式。
   4. 每个模块都使用“模块 XX 开始 / 模块 XX 结束”边界，方便后期单独优化。
   5. 后期维护建议：先通过目录定位模块，再在对应模块内修改，减少跨模块覆盖。

   模块索引：
   01. 全局变量与基础样式
       负责全站设计令牌、明暗模式、基础链接、焦点状态、动效降级。
   02. 顶栏 / 搜索 / 登录按钮
       负责顶部导航、搜索层级、用户菜单、登录按钮和按钮状态覆盖。
   03. 侧边栏 / 折叠菜单 / RSS 贴底
       负责桌面固定侧栏、移动端 Offcanvas、菜单高亮、子菜单和 RSS 区域。
   04. 首页大屏动画
       负责首页开场遮罩、文字动画、淡入淡出和动画降级兼容。
   05. 作者信息小工具 / 通用小按钮
       负责作者卡片、头像、社交按钮、电话邮箱按钮和小号胶囊按钮。
   06. 通用文章列表
       负责文章列表卡片、缩略图、标题摘要截断、分类徽标和文章格式角标。
   07. 单篇文章正文 / 内容排版 / 文章格式
       负责文章详情页、正文排版、代码块、表格、媒体嵌入、图库和分享导航。
   08. 评论区 / 评论表单 / 点赞点踩
       负责评论列表、回复按钮、评论表单、点赞点踩按钮和评论分页。
   09. 网站统计小工具
       负责文章数量、浏览量、评论数等统计卡片的布局和防溢出。
   10. 下拉菜单 / 按钮 / 导航统一色彩
       负责 Bootstrap 下拉菜单、按钮、导航组件的全局色彩统一。
   11. 可访问性辅助类
       负责屏幕阅读器、隐藏文本、键盘导航等辅助样式。
   12. 打印样式
       负责浏览器打印时隐藏无关区域并优化正文可读性。
   13. 页脚兼容补丁 / 小优化
       负责页脚和旧模板中的局部兼容修正。
   14. 面包屑导航
       负责面包屑单行、省略号、边框、图标和移动端适配。
   15. 页脚基础
       负责页脚背景、文字、链接、版权、备案等基础视觉。
   16. 页脚 CTA / 联系客服 / 二维码
       负责页脚转化区、客服按钮、二维码、联系方式和明暗图适配。
   17. 联系页面表单
       负责联系页输入框、标签、必填提示、聚焦状态和提交按钮。
   18. 产品归档 / 产品分类 / 产品卡片
       负责产品列表、分类筛选、产品卡片、缩略图、库存价格和响应式网格。
   19. 产品内容页 / 产品询价弹窗
       负责产品详情页、询价按钮、Modal 弹窗、询价表单和产品内容区。
   20. 404 页面
       负责错误页空状态、搜索框、返回按钮和推荐入口。
   21. 作者归档页
       负责作者资料卡、头像、简介、统计和归档头部视觉。
   22. 图片附件页
       负责图片附件页图片展示、说明文字和上一张/下一张导航。
   23. 侧边栏小工具集合
       负责侧边栏多个 Widget 的统一卡片、标题、列表和链接样式。
   24. 首页置顶文章
       负责首页精选/置顶文章卡片、封面遮罩、标题和元信息。
   25. Preloader 加载动画
       负责页面加载遮罩、加载动画、隐藏状态和动效兼容。
   ================================================================================ */

/* ================================================================================
   模块 01：全局变量与基础样式
   --------------------------------------------------------------------------------
   功能范围：定义全站 CSS 设计令牌，包括导航高度、侧边栏宽度、圆角、阴影、过渡时间、基础背景色、文字色、边框色、链接色、代码块颜色等。
   主要包含：`:root`、`[data-bs-theme="dark"]`、系统深色模式、`html/body`、全局链接、选中文本、键盘焦点、触屏 hover 降级、减少动画偏好。
   维护建议：后期调整主题整体颜色、明暗模式、圆角、阴影、动效速度时优先修改本模块，不建议在其它模块重复硬编码同类变量。
   注意事项：这是全站基础层，影响范围最大；修改变量前建议同时检查白天模式、黑夜模式、移动端和代码块显示。
   模块边界：从此处开始，到“模块 01 结束：全局变量与基础样式”为止。
   ================================================================================ */

:root {
  --navbar-h: 56px;
  --sidebar-width: 260px;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --transition-fast: .18s;
  --transition-med: .25s;
  --elev-1: 0 .125rem .25rem rgba(0,0,0,.06);
  --elev-2: 0 .5rem 1rem rgba(0,0,0,.10);
  --bg: var(--bs-body-bg, #ffffff);
  --surface: #f7f7f8;
  --text: var(--bs-body-color, #1d1d1f);
  --muted: var(--bs-secondary-color, #6c757d);
  --primary: var(--bs-primary, #0d6efd);
  --primary-contrast: #fff;
  --danger: #e02433;
  --success: #198754;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 .5rem 1rem rgba(0,0,0,0.06);
  --accent: #9b51e0;
  --link: var(--primary);
  --link-hover: color-mix(in srgb, var(--primary) 82%, black 18%);
  --surface-soft: color-mix(in srgb, var(--bg) 96%, #000 4%);
  --surface-strong: color-mix(in srgb, var(--bg) 90%, #000 10%);
  --border-strong: color-mix(in srgb, var(--border) 70%, currentColor 30%);
  --focus: color-mix(in srgb, var(--primary) 45%, white 55%);
  --code-bg: #f6f8fa;
  --code-text: #0b1220;
  --code-inline: rgba(0,0,0,0.05);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #131416;
  --text: #e6edf3;
  --muted: rgba(255,255,255,0.7);
  --primary: #3399ff;
  --primary-contrast: #0f1724;
  --danger: #ff6b6b;
  --success: #31d0a3;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 .75rem 1.5rem rgba(0,0,0,0.5);
  --accent: #b88aff;
  --link: #5fb3ff;
  --link-hover: color-mix(in srgb, var(--link) 80%, white 20%);
  --surface-soft: color-mix(in srgb, var(--bg) 94%, #fff 6%);
  --surface-strong: color-mix(in srgb, var(--bg) 86%, #fff 14%);
  --border-strong: rgba(255,255,255,.16);
  --focus: color-mix(in srgb, var(--primary) 60%, white 40%);
  --code-bg: #0b0d10;
  --code-text: #e6edf3;
  --code-inline: rgba(255,255,255,0.03);
}

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #131416;
    --text: #e6edf3;
    --muted: rgba(255,255,255,0.75);
    --primary: #3399ff;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 .75rem 1.5rem rgba(0,0,0,0.5);
  }
}

html, body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-med) ease, color var(--transition-med) ease;
}

html:focus-within {
  scroll-behavior: smooth;
}

::selection {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

:where(button, a, [tabindex="0"], input, select, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (hover: none) {
  .hover-raise:hover, .hover-raise:focus {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .intro-overlay {
    display: none !important;
  }
}

/* ============================== 模块 01 结束：全局变量与基础样式 ============================== */

/* ================================================================================
   模块 02：顶栏 / 搜索 / 登录按钮
   --------------------------------------------------------------------------------
   功能范围：控制顶部导航栏高度、层级、搜索浮层、用户头像下拉、顶部按钮以及登录按钮的交互状态。
   主要包含：`header.navbar`、`.search`、`.topbar`、`.dropdown-toggle`、`.zob-login-btn` 以及 Bootstrap 按钮类覆盖。
   维护建议：优化顶部导航、搜索框、登录按钮点击反色、hover/active/focus 状态时集中改本模块。
   注意事项：本模块含 `!important` 用于压制 Bootstrap 默认按钮状态；如登录按钮异常，优先检查这里与 HTML class 是否匹配。
   模块边界：从此处开始，到“模块 02 结束：顶栏 / 搜索 / 登录按钮”为止。
   ================================================================================ */

header.navbar {
  z-index: 1050;
  height: var(--navbar-h);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.search {
  z-index: 1100;
  top: var(--navbar-h);
}

.topbar .dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none !important;
}

.topbar .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: .35rem;
  vertical-align: middle;
  border-top-width: .35em;
  border-right-width: .35em;
  border-left-width: .35em;
  opacity: .85;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.topbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
}

.topbar .dropdown-toggle .bi-chevron-down {
  margin-left: .35rem;
  font-size: 1rem;
  opacity: .85;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.topbar .dropdown-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  opacity: 1;
}

.topbar .dropdown-toggle img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
  transition: transform .2s ease;
}

.topbar .dropdown-toggle:hover img {
  transform: scale(1.05);
}

.topbar .btn-sm, .topbar .dropdown-toggle img {
  height: 32px;
  line-height: 1.2;
}

.topbar .btn-login {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.zero-title a {
  color: var(--text);
}

.list-group-item {
  background-color: transparent;
  color: var(--text);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.zob-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 38px;
  padding: 0 .95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: #111827;
  color: #ffffff;
  transition: background-color .25s ease,
        color .25s ease,
        transform .15s ease,
        box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.zob-login-btn i {
  font-size: 1rem;
  line-height: 1;
}

.zob-login-btn:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.zob-login-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.zob-login-btn:focus,
.zob-login-btn:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

.zob-login-btn:visited {
  color: inherit;
}

.zob-login-btn.btn,
.zob-login-btn.btn-sm,
.zob-login-btn.btn-dark {
  background: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}

.zob-login-btn {
  -webkit-appearance: none;
  appearance: none;
}

/* ============================== 模块 02 结束：顶栏 / 搜索 / 登录按钮 ============================== */

/* ================================================================================
   模块 03：侧边栏 / 折叠菜单 / RSS 贴底
   --------------------------------------------------------------------------------
   功能范围：控制左侧导航整体视觉、桌面固定侧边栏、移动端 Offcanvas、折叠菜单、子菜单、滚动条、RSS 贴底区域。
   主要包含：`#sidebar`、`.offcanvas-header`、`.position-sticky`、`.zob-collapse-toggle`、`.zob-collapse-content`、`.main-content`、`.zob-sidebar-bottom`、`.sidebar-rss-*`。
   维护建议：修改侧栏宽度、菜单间距、当前项高亮、子菜单缩进、移动端抽屉宽度、RSS 按钮样式时集中改本模块。
   注意事项：本模块与 `--navbar-h`、`--sidebar-width` 强相关；若改侧栏宽度，也要确认 `.main-content` 的桌面让位是否同步。
   模块边界：从此处开始，到“模块 03 结束：侧边栏 / 折叠菜单 / RSS 贴底”为止。
   ================================================================================ */

#sidebar {
  background-color: color-mix(in srgb, var(--surface) 96%, transparent);
  border-right: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 0 0 transparent;
  transition: background-color var(--transition-med) ease,
    color var(--transition-med) ease,
    border-color var(--transition-med) ease,
    box-shadow var(--transition-med) ease,
    transform 0.18s ease;
}

#sidebar .offcanvas-header {
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding-block: .75rem;
}

.position-sticky {
  top: var(--navbar-h) !important;
}

#sidebar .list-group {
  font-size: .95rem;
  padding: .5rem;
  gap: .125rem;
}

#sidebar .list-group-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.5;
  padding: .65rem 1.1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: .5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-med),
    color var(--transition-med),
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

#sidebar .list-group-item i {
  font-size: 1.1rem;
  margin-right: .7rem;
  flex-shrink: 0;
}

#sidebar .list-group-item .zob-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#sidebar .list-group-item:hover,
#sidebar .list-group-item:focus {
  background-color: color-mix(in srgb, var(--text) 4%, transparent);
  transform: translateX(2px);
}

#sidebar .list-group-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

#sidebar .list-group-item.active,
#sidebar .list-group-item.is-active {
  font-weight: 600;
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary),
    0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateX(0);
}

.zob-collapse-toggle {
  cursor: pointer;
  user-select: none;
}

.zob-collapse-toggle .zob-toggle-icon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.zob-collapse-toggle .bi-chevron-down {
  transition: transform var(--transition-med) ease;
}

.zob-collapse-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(-180deg);
}

.zob-collapse-content .list-group-item {
  padding-left: 2.5rem;
  font-size: .9rem;
  color: var(--muted);
}

.zob-collapse-content .list-group-item:hover,
.zob-collapse-content .list-group-item:focus {
  color: var(--text);
}

.zob-collapse-content .list-group-item.active,
.zob-collapse-content .list-group-item.is-active {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--primary);
}

.zob-sidebar-section-title {
  padding: .65rem 1.1rem .4rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

@media (min-width: 992px) {
  #sidebar {
    position: fixed !important;
    top: var(--navbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    max-width: min(320px, 90vw);
    z-index: 1000;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 25px rgba(0, 0, 0, .08);
  }

  #sidebar::-webkit-scrollbar {
    width: 6px;
  }

  #sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  #sidebar::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 999px;
  }

  #sidebar:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--muted) 75%, transparent);
  }

  .main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-med) ease, padding var(--transition-med) ease;
  }

  @media (max-width: 1199.98px) {
    #sidebar .list-group-item {
      padding-inline: .9rem;
    }
  }
}

@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0 !important;
  }

  #sidebar.offcanvas {
    max-width: min(290px, 80vw);
    border-right: 1px solid var(--border);
  }

  .offcanvas-backdrop {
    z-index: 1040 !important;
  }

  #sidebar.offcanvas {
    z-index: 1045 !important;
  }

  header.navbar {
    z-index: 1020 !important;
  }

  #sidebar .list-group-item {
    padding-block: .75rem;
  }
}

#sidebar .offcanvas-body {
  min-height: 0;
}

#sidebar .zob-sidebar-bottom {
  background-color: var(--surface, #f9fafb);
}

#sidebar .sidebar-rss-bottom {
  color: var(--muted, #6b7280);
  font-size: .85rem;
  gap: .25rem;
  cursor: pointer;
  transition: color .16s ease-out;
}

#sidebar .sidebar-rss-bottom .bi-rss-fill {
  font-size: 1rem;
  color: color-mix(in srgb, var(--primary, #f97316) 80%, #fbbf24);
  transition: transform .16s ease-out, color .16s ease-out;
}

#sidebar .sidebar-rss-chip {
  padding: .08rem .5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary, #f97316) 42%, transparent);
  background-color: color-mix(in srgb, var(--surface-soft, #fff) 86%, var(--primary, #f97316) 14%);
  color: color-mix(in srgb, var(--primary, #f97316) 70%, #0f172a);
  transition: all .2s ease-out;
}

#sidebar .sidebar-rss-bottom:hover,
#sidebar .sidebar-rss-bottom:focus-visible {
  color: var(--primary, #f97316);
}

#sidebar .sidebar-rss-bottom:hover .bi-rss-fill,
#sidebar .sidebar-rss-bottom:focus-visible .bi-rss-fill {
  color: var(--primary, #f97316);
  transform: scale(1.1);
}

#sidebar .sidebar-rss-chip.copied {
  border-color: #22c55e;
  background-color: color-mix(in srgb, var(--surface-soft, #fff) 84%, #22c55e 16%);
  color: #16a34a;
  transform: scale(1.05);
}

[data-bs-theme="dark"] #sidebar .zob-sidebar-bottom {
  background-color: color-mix(in srgb, var(--surface, #020617) 94%, #000 6%);
}

[data-bs-theme="dark"] #sidebar .sidebar-rss-chip {
  background-color: color-mix(in srgb, var(--surface-soft, #020617) 80%, var(--primary, #f97316) 20%);
  border-color: color-mix(in srgb, var(--primary, #f97316) 60%, transparent);
}

[data-bs-theme="dark"] #sidebar .sidebar-rss-chip.copied {
  border-color: #4ade80;
  background-color: color-mix(in srgb, var(--surface-soft, #020617) 80%, #22c55e 20%);
  color: #4ade80;
}

/* ============================== 模块 03 结束：侧边栏 / 折叠菜单 / RSS 贴底 ============================== */

/* ================================================================================
   模块 04：首页大屏动画
   --------------------------------------------------------------------------------
   功能范围：控制站点首页或首屏加载时的黑底文字动画、淡入淡出和打印/减少动画兼容。
   主要包含：`.intro-overlay`、`.intro-text`、`@keyframes fadeIn`、`@keyframes fadeOut`。
   维护建议：优化开场动画时长、文字大小、背景色、隐藏时机、层级时集中改本模块。
   注意事项：该模块使用较高 `z-index`，若页面首屏被遮挡、动画不消失或影响无障碍体验，优先检查这里。
   模块边界：从此处开始，到“模块 04 结束：首页大屏动画”为止。
   ================================================================================ */

.intro-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  animation: fadeOut 1s 3s forwards;
  will-change: opacity;
}

.intro-text {
  color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8vw;
  font-weight: 700;
  text-transform: uppercase;
  animation: fadeIn 700ms ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(.97);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ============================== 模块 04 结束：首页大屏动画 ============================== */

/* ================================================================================
   模块 05：作者信息小工具 / 通用小按钮
   --------------------------------------------------------------------------------
   功能范围：控制侧边栏作者信息卡、头像渐变边框、简介文字、社交分组、联系方式按钮和通用小号胶囊按钮。
   主要包含：`.zob-author-card-widget`、`.zob-author-avatar-wrap`、`.zob-author-avatar`、`.zob-author-social-*`、`.btn.btn-xs`、`.zob-btn-ghost`、电话/邮箱按钮。
   维护建议：优化作者卡片视觉、社交按钮颜色、头像大小、联系方式按钮、夜间模式对比度时集中改本模块。
   注意事项：`.zob-btn-ghost` 可能被多个小工具复用，修改时要检查作者卡、联系方式、社交按钮是否同时受影响。
   模块边界：从此处开始，到“模块 05 结束：作者信息小工具 / 通用小按钮”为止。
   ================================================================================ */

.zob-author-card-widget {
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.85rem);
  box-shadow: var(--shadow, 0 12px 30px rgba(15, 23, 42, 0.08));
  transition: background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow .2s ease,
    transform .18s ease;
}

[data-bs-theme="dark"] .zob-author-card-widget {
  border-color: var(--border, #252b35);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.8);
}

.zob-author-card-widget:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.zob-author-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10%;
  padding: 3px;
  background: conic-gradient(
    from 140deg,
    var(--bs-primary, #0d6efd),
    #8b5cf6,
    #ec4899,
    var(--bs-primary, #0d6efd)
  );
}

[data-bs-theme="dark"] .zob-author-avatar-wrap {
  background: conic-gradient(
    from 140deg,
    rgba(59, 130, 246, .9),
    rgba(168, 85, 247, .95),
    rgba(236, 72, 153, .95),
    rgba(56, 189, 248, .9)
  );
}

.zob-author-avatar {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  display: block;
  object-fit: cover;
  border: 2px solid var(--surface-soft);
}

.zob-author-name {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.zob-author-tagline {
  color: var(--muted, var(--bs-secondary-color));
  font-size: .82rem;
}

.zob-author-intro {
  color: var(--muted, var(--bs-secondary-color));
  line-height: 1.6;
  font-size: .8rem;
}

.btn.btn-xs {
  padding: .18rem .62rem;
  font-size: .78rem;
  line-height: 1.4;
  border-radius: 999px;
}

.zob-btn-ghost {
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  background-color: color-mix(
    in srgb,
    var(--surface-soft) 88%,
    var(--bs-primary, #0d6efd) 12%
  );
  border-color: color-mix(
    in srgb,
    var(--border) 55%,
    var(--bs-primary, #0d6efd) 45%
  );
  color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02);
  transition: background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

[data-bs-theme="dark"] .zob-btn-ghost {
  background-color: color-mix(
    in srgb,
    var(--surface-soft) 70%,
    var(--bs-primary, #60a5fa) 30%
  );
  border-color: color-mix(
    in srgb,
    var(--border) 40%,
    var(--bs-primary, #60a5fa) 60%
  );
  color: #e5e7eb;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.65);
}

.zob-btn-ghost:hover,
.zob-btn-ghost:focus-visible {
  text-decoration: none;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .45);
  transform: translateY(-0.5px);
}

.zob-author-about-btn {
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
}

.zob-author-about-btn i {
  font-size: .9em;
}

.zob-author-social-groups {
  padding-top: .4rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}

.zob-author-social-group + .zob-author-social-group {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 45%, transparent);
}

.zob-author-social-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .78;
}

.zob-author-social-group .btn.btn-xs {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.zob-btn-phone i,
.zob-btn-mobile i,
.zob-btn-email i {
  font-size: .95em;
}

.zob-btn-email {
  font-weight: 500;
}

/* ============================== 模块 05 结束：作者信息小工具 / 通用小按钮 ============================== */

/* ================================================================================
   模块 06：通用文章列表
   --------------------------------------------------------------------------------
   功能范围：控制首页、分类、搜索、标签等文章列表卡片的图文布局、缩略图比例、标题摘要截断、分类徽标、元信息和文章格式角标。
   主要包含：`.article-list`、`.article-item`、`.article-thumb`、`.article-title`、`.article-excerpt`、`.article-meta`、`.article-format-overlay`、不同 post format 状态类。
   维护建议：优化文章列表密度、缩略图尺寸、移动端一列布局、标题/摘要行数、阅读量评论显示时集中改本模块。
   注意事项：本模块使用 `:has()` 判断无缩略图场景；若需兼容旧浏览器，需要额外补充降级类。
   模块边界：从此处开始，到“模块 06 结束：通用文章列表”为止。
   ================================================================================ */

.article-list .list-group-item.article-item {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.9rem;
  align-items: stretch;
  text-decoration: none;
  transition: background-color var(--transition-med),
    border-color var(--transition-med),
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.article-list .list-group-item.article-item::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: 0.5rem;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--bs-primary) 30%);
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 0.18s ease,
    background-color 0.18s ease;
}

@media (hover: hover) {
  .article-list .list-group-item.article-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft, 0 12px 30px rgba(0,0,0,.12));
    border-color: color-mix(in srgb, var(--border) 45%, var(--bs-primary) 55%);
    background: color-mix(in srgb, var(--surface-soft) 80%, var(--bs-primary) 6%);
  }

  .article-list .list-group-item.article-item:hover::before {
    opacity: 0.75;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bs-primary) 70%, #fff 30%),
      color-mix(in srgb, var(--bs-primary) 50%, #000 50%)
    );
  }
}

.article-list .list-group-item.article-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bs-primary) 75%, transparent);
  outline-offset: 2px;
}

.article-list .article-thumb {
  width: 132px;
  max-width: 36vw;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 40%, #000 4%);
  flex-shrink: 0;
}

.article-list .article-thumb-img,
.article-list .article-thumb img,
.article-list img.wp-post-image {
  width: 100%;
  height: 100%;
  min-height: 74px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.article-list .list-group-item.article-item:not(:has(.article-thumb)) .article-main {
  padding-left: 0.2rem;
}

.article-list .article-title {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-list .article-excerpt {
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text-muted, rgba(128, 128, 128, .9));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-list .article-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--bs-primary) 12%, var(--surface-soft) 88%);
  color: color-mix(in srgb, var(--bs-primary) 92%, #fff 8%);
  border: 1px solid color-mix(in srgb, var(--bs-primary) 40%, transparent);
  white-space: nowrap;
}

.article-list .article-meta {
  color: var(--text-muted, rgba(130,130,130,.95));
}

.article-list .article-meta-item {
  color: inherit;
  opacity: 0.9;
}

.article-list .article-meta-item i {
  font-size: 0.85rem;
  opacity: 0.95;
}

.article-list .article-meta-right .article-meta-item {
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .article-list .list-group-item.article-item {
    padding: 0.75rem 0.85rem;
  }

  .article-list .article-thumb {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-md);
  }

  .article-list .article-excerpt {
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 1024px) {
  .article-list .list-group-item.article-item::before {
    display: none;
    opacity: 0;
    width: 0;
  }
}

[data-bs-theme="dark"] .article-list .list-group-item.article-item {
  background: var(--surface-soft);
  border-color: color-mix(in srgb, var(--border) 70%, #000 30%);
}

[data-bs-theme="dark"] .article-list .list-group-item.article-item:hover {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--bs-primary) 8%);
}

[data-bs-theme="dark"] .article-list .article-cat-badge {
  background: color-mix(in srgb, var(--bs-primary) 28%, var(--surface-soft) 72%);
  color: color-mix(in srgb, #fff 90%, var(--bs-primary) 10%);
}

.article-list .article-thumb {
  position: relative;
}

.article-list .article-format-overlay {
  position: absolute;
  top: .5rem;
  right: .5rem;
  min-width: 30px;
  height: 30px;
  padding: 0 .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .75rem;
  line-height: 1;
  z-index: 3;
  transition: transform .2s ease,
        background .2s ease;
}

.article-list .article-format-overlay i {
  font-size: .85rem;
}

.article-list .article-item:hover
.article-format-overlay {
  transform: scale(1.08);
}

.article-list .article-format-icon {
  margin-right: .35rem;
  font-size: .9em;
  opacity: .75;
}

.article-list .article-item-format-gallery
.article-format-overlay {
  background: rgba(25,135,84,.9);
}

.article-list .article-item-format-video
.article-format-overlay {
  background: rgba(220,53,69,.9);
}

.article-list .article-item-format-audio
.article-format-overlay {
  background: rgba(13,110,253,.9);
}

.article-list .article-item-format-link
.article-format-overlay {
  background: rgba(108,117,125,.9);
}

.article-list .article-item-format-quote
.article-format-overlay {
  background: rgba(111,66,193,.9);
}

.article-list .article-item-format-gallery
.article-format-overlay small {
  font-size: .65rem;
  font-weight: 600;
}

/* ============================== 模块 06 结束：通用文章列表 ============================== */

/* ================================================================================
   模块 07：单篇文章正文 / 内容排版 / 文章格式
   --------------------------------------------------------------------------------
   功能范围：控制单篇文章容器、标题、作者元信息、正文排版、图片对齐、代码块、表格、引用、视频音频、图库、文件块、文章格式展示、分享和上下篇导航。
   主要包含：`.single-article`、`.zob-article-*`、`.zob-article-content`、`.aligncenter/left/right`、`pre/code/kbd/mark`、表格、媒体嵌入、图库、`.zob-gallery-*`、`.zob-video-*`、`.zob-audio-*`、`.zob-quote-*`、`.zob-link-*` 等。
   维护建议：优化正文阅读体验、图片居中、代码块、表格横向滚动、音视频比例、文章格式视觉、分享按钮、上下篇导航时集中改本模块。
   注意事项：这是体积最大的内容模块，包含多种 WordPress 编辑器输出；改动后应测试经典编辑器、古腾堡块、图片对齐、嵌入视频和移动端正文。
   模块边界：从此处开始，到“模块 07 结束：单篇文章正文 / 内容排版 / 文章格式”为止。
   ================================================================================ */

.single-article.zob-article {
  background-color: var(--surface-soft, #f9fafb);
  border: 1px solid var(--bs-border-color, rgba(15,23,42,.06));
  border-radius: 1rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 0 18px 45px rgba(15,23,42,.04);
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

[data-bs-theme="dark"] .single-article.zob-article {
  background-color: color-mix(in srgb, var(--bs-body-bg) 80%, #020617 20%);
  border-color: rgba(148,163,184,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
}

.zob-article-header {
  border-color: rgba(148,163,184,.25);
}

[data-bs-theme="dark"] .zob-article-header {
  border-color: rgba(15,23,42,.9);
}

.zob-article-title {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.25;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}

@media (min-width: 1200px) {
  .zob-article-title {
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  }
}

html[lang^="zh"] .zob-article-title,
html[lang^="ja"] .zob-article-title,
html[lang^="ko"] .zob-article-title {
  font-size: clamp(1.25rem, 1.0rem + 0.9vw, 1.7rem);
  letter-spacing: 0;
}

html[lang^="en"] .zob-article-title,
html[lang^="fr"] .zob-article-title,
html[lang^="de"] .zob-article-title,
html[lang^="es"] .zob-article-title,
html[lang^="pt"] .zob-article-title,
html[lang^="ru"] .zob-article-title {
  letter-spacing: .02em;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .zob-article-title {
    font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.75rem);
  }

  html[lang^="zh"] .zob-article-title,
  html[lang^="ja"] .zob-article-title,
  html[lang^="ko"] .zob-article-title {
    font-size: clamp(1.25rem, 1.0rem + 0.6vw, 1.6rem);
  }
}

.zob-article-meta .zob-meta-details {
  min-width: 0;
}

.zob-article-meta .zob-meta-author a {
  color: var(--bs-heading-color, #212529);
  text-decoration: none;
  font-size: 1.05rem;
  transition: color 0.2s ease;
}

.zob-article-meta .zob-meta-author a:hover {
  color: var(--primary, var(--bs-primary));
}

.zob-article-meta .zob-meta-stats {
  row-gap: 0.25rem;
  color: var(--bs-secondary-color, #6c757d);
}

.zob-article-meta .zob-meta-item i.bi {
  font-size: 0.9em;
  transform: translateY(-1px);
}

[data-bs-theme="dark"] .zob-article-meta .zob-meta-author a {
  color: #f3f4f6;
}

[data-bs-theme="dark"] .zob-article-meta .zob-meta-stats {
  color: #9ca3af;
}

[data-bs-theme="dark"] .zob-article-meta .zob-meta-avatar img {
  border-color: #374151 !important;
}

.zob-article-content > *:first-child {
  margin-top: 0;
}

.zob-article-content > * + * {
  margin-top: 1.25rem;
}

.zob-article-content img {
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.zob-article-content .aligncenter,
.zob-article-content .aligncenter a,
.zob-article-content a.aligncenter {
  display: inline-block !important;
  margin: 1.5rem auto !important;
  line-height: 0 !important;
  width: auto !important;
  text-align: center !important;
  float: none !important;
}

.zob-article-content .aligncenter img,
.zob-article-content a.aligncenter img {
  display: inline-block !important;
  margin: 0 !important;
  box-shadow: inherit;
  vertical-align: top;
}

.zob-article-content p:has(img.aligncenter),
.zob-article-content p:has(a.aligncenter) {
  text-align: center !important;
  display: block;
}

.zob-article-content h2,
.zob-article-content h3,
.zob-article-content h4,
.zob-article-content h5,
.zob-article-content h6 {
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  scroll-margin-top: 80px;
}

.zob-article-content ul,
.zob-article-content ol {
  padding-left: 1.5rem;
}

.zob-article-content li + li {
  margin-top: .35rem;
}

.zob-article-content blockquote {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-inline-start: 4px solid var(--bs-primary, #0d6efd);
  background-color: rgba(15,23,42,.03);
  border-radius: 0 .5rem .5rem 0;
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
}

[data-bs-theme="dark"] .zob-article-content blockquote {
  background-color: rgba(15,23,42,.85);
  color: #adb5bd;
}

.zob-article-content hr {
  border: 0;
  border-top: 1px dashed rgba(148,163,184,.5);
  margin: 2rem 0;
}

[data-bs-theme="dark"] .zob-article-content hr {
  border-top-color: rgba(148,163,184,.25);
}

.zob-article-content pre {
  position: relative;
  margin: 1.5rem 0;
  padding: 2.5rem 1rem 1rem;
  overflow-x: auto;
  border-radius: .65rem;
  font-size: .85rem;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: #f8f9fa;
  border: 1px solid rgba(148,163,184,.3);
  color: #24292e;
  -webkit-overflow-scrolling: touch;
}

.zob-article-content pre::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fc625d;
  box-shadow: 18px 0 #fdbc40, 36px 0 #35cd4b;
  opacity: 0.8;
}

.zob-article-content pre::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.zob-article-content pre::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.zob-article-content pre::-webkit-scrollbar-thumb {
  background-color: rgba(148,163,184,.3);
  border-radius: 4px;
}

.zob-article-content pre:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148,163,184,.6);
}

[data-bs-theme="dark"] .zob-article-content pre {
  background-color: #020617;
  border-color: rgba(148,163,184,.25);
  color: #c9d1d9;
}

[data-bs-theme="dark"] .zob-article-content pre::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.15);
}

[data-bs-theme="dark"] .zob-article-content pre:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.3);
}

.zob-article-content code {
  padding: .15rem .35rem;
  margin: 0 .15rem;
  border-radius: .35rem;
  font-size: .85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: rgba(15,23,42,.04);
  border: 1px solid rgba(148,163,184,.35);
  color: #d63384;
  word-break: break-word;
}

[data-bs-theme="dark"] .zob-article-content code {
  background-color: rgba(15,23,42,.85);
  border-color: rgba(148,163,184,.4);
  color: #ff7b72;
}

.zob-article-content pre code {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  word-break: normal;
}

.zob-article-content kbd {
  padding: .15rem .4rem;
  border-radius: .35rem;
  font-size: .8em;
  font-weight: 600;
  font-family: inherit;
  color: var(--bs-body-color);
  background-color: rgba(15,23,42,.04);
  border: 1px solid rgba(148,163,184,.4);
  box-shadow: 0 2px 0 rgba(148,163,184,.2);
}

[data-bs-theme="dark"] .zob-article-content kbd {
  background-color: rgba(15,23,42,.9);
  border-color: rgba(148,163,184,.5);
  box-shadow: 0 2px 0 rgba(0,0,0,.5);
  color: #e5e7eb;
}

.zob-article-content mark {
  padding: .1rem .3rem;
  border-radius: .25rem;
  background-color: rgba(253, 224, 71, 0.6);
  color: inherit;
}

[data-bs-theme="dark"] .zob-article-content mark {
  background-color: rgba(133, 77, 14, 0.7);
  color: #fef08a;
}

.zob-article-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.zob-article-content th,
.zob-article-content td {
  padding: .65rem .85rem;
  border: 1px solid rgba(148,163,184,.4);
  vertical-align: top;
}

.zob-article-content thead th {
  background-color: rgba(15,23,42,.04);
  font-weight: 600;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-article-content th,
[data-bs-theme="dark"] .zob-article-content td {
  border-color: rgba(148,163,184,.25);
}

[data-bs-theme="dark"] .zob-article-content thead th {
  background-color: rgba(15,23,42,.85);
}

.zob-article-content iframe,
.zob-article-content video,
.zob-article-content embed,
.zob-article-content object {
  max-width: 100%;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.zob-article-content .wp-block-embed__wrapper,
.zob-article-content .zob-video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: .75rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.zob-article-content .wp-block-embed__wrapper iframe,
.zob-article-content .zob-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.zob-article-content .wp-video {
  width: 100% !important;
  max-width: 100%;
  margin: 1.5rem auto;
}

.zob-article-content .mejs-container {
  width: 100% !important;
  min-width: 0 !important;
  border-radius: .75rem;
  overflow: hidden;
}

.zob-article-content audio,
.zob-article-content .wp-audio-shortcode {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
}

.zob-article-content .gallery,
.zob-article-content .wp-block-gallery {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.zob-article-content .gallery img,
.zob-article-content .wp-block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.zob-article-content .wp-block-file {
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  border: 1px solid rgba(148,163,184,.3);
  background-color: rgba(15,23,42,.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

[data-bs-theme="dark"] .zob-article-content .wp-block-file {
  background-color: rgba(15,23,42,.85);
  border-color: rgba(148,163,184,.25);
}

.zob-article-content .wp-block-file__button {
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
  padding: 0.35rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  font-size: .9rem;
  transition: opacity .2s ease;
}

.zob-article-content .wp-block-file__button:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

.zob-article-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.zob-article-content .alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}

.zob-article-content .alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}

.zob-article-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767.98px) {
  .zob-article-content .alignleft,
  .zob-article-content .alignright {
    float: none;
    display: block;
    margin: 1.5rem auto;
    text-align: center;
  }
}

.zob-gallery-item {
  background-color: var(--bs-body-bg);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.zob-gallery-ratio {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}

.zob-gallery-ratio img {
  transition: transform 0.5s ease;
}

.zob-gallery-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.3s ease;
  z-index: 2;
}

.zob-gallery-overlay i {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.zob-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.zob-gallery-item:hover .zob-gallery-overlay {
  opacity: 1 !important;
}

.zob-gallery-item:hover .zob-gallery-overlay i {
  transform: scale(1);
}

.zob-gallery-item:hover .zob-gallery-ratio img {
  transform: scale(1.08);
}

.zob-single-image-link {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
  background-color: var(--bs-body-bg);
}

.zob-single-image-link img {
  transition: transform 0.5s ease;
  display: block;
}

.zob-image-overlay {
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
  z-index: 2;
}

.zob-image-overlay i {
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zob-single-image-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.zob-single-image-link:hover .zob-image-overlay {
  opacity: 1 !important;
}

.zob-single-image-link:hover .zob-image-overlay i {
  transform: scale(1);
}

.zob-single-image-link:hover img {
  transform: scale(1.03);
}

.zob-video-showcase {
  background-color: #000;
  transition: box-shadow 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.zob-video-showcase iframe,
.zob-video-showcase embed,
.zob-video-showcase object {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

.zob-video-showcase video {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.zob-video-showcase .wp-video {
  width: 100% !important;
  height: auto !important;
}

.zob-video-showcase .wp-video-shortcode {
  max-width: 100% !important;
}

.zob-video-showcase:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.zob-audio-player-card {
  background-color: var(--bs-body-bg);
  border-color: rgba(var(--bs-body-color-rgb), 0.08) !important;
  z-index: 1;
}

.zob-audio-blur-bg {
  background-size: cover;
  background-position: center;
  filter: blur(40px) opacity(0.12);
  transform: scale(1.1);
  z-index: -1;
}

.zob-audio-cover,
.zob-audio-cover-placeholder {
  width: 80px;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .zob-audio-cover,
    .zob-audio-cover-placeholder {
    width: 110px;
    height: 110px;
  }
}

.zob-audio-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zob-audio-cover-placeholder i {
  opacity: 0.4;
}

.zob-audio-controls {
  min-width: 0;
}

.zob-audio-embed-wrapper {
  width: 100%;
  overflow: visible;
}

.zob-audio-embed-wrapper audio,
.zob-audio-embed-wrapper iframe,
.zob-audio-embed-wrapper .wp-audio-shortcode {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

.zob-audio-embed-wrapper audio {
  height: 40px;
}

.zob-audio-embed-wrapper .wp-audio-playlist,
.zob-audio-embed-wrapper .mejs-container {
  width: 100% !important;
  max-width: 100% !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  display: inline-block;
  animation: spin 8s linear infinite;
}

.zob-quote-showcase {
  background-color: rgba(var(--bs-body-bg-rgb), 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 5px solid var(--bs-warning) !important;
  border-color: rgba(var(--bs-body-color-rgb), 0.08);
  position: relative;
  z-index: 1;
}

.zob-quote-showcase blockquote::before,
.zob-quote-showcase blockquote::after,
.zob-quote-fallback-mode blockquote::before,
.zob-quote-fallback-mode blockquote::after {
  content: none !important;
  display: none !important;
}

.zob-quote-watermark {
  top: -1.5rem;
  right: 0.5rem;
  font-size: 8rem;
  line-height: 1;
  font-family: Georgia, serif;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06 !important;
}

.zob-quote-content-wrapper {
  position: relative;
  z-index: 2;
  padding-right: 2rem;
}

.zob-quote-showcase blockquote,
.zob-quote-fallback-mode blockquote {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.zob-quote-showcase blockquote p,
.zob-quote-fallback-mode p {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--bs-heading-color);
}

.zob-quote-showcase blockquote cite,
.zob-quote-fallback-mode blockquote cite {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  margin-top: 1rem;
  font-weight: 400;
}

.zob-quote-showcase blockquote cite::before,
.zob-quote-fallback-mode blockquote cite::before {
  content: "— ";
  opacity: 0.6;
}

.zob-quote-fallback-mode {
  background-color: rgba(var(--bs-body-bg-rgb), 0.25);
  border-left: 4px solid var(--bs-warning);
  padding: 1.25rem;
  border-radius: 0.375rem;
}

.zob-link-card {
  background-color: var(--bs-body-bg);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.zob-link-icon {
  width: 56px;
  height: 56px;
}

.zob-link-bg-decor {
  right: -1rem;
  top: -2rem;
  font-size: 8rem;
  color: var(--bs-primary);
  z-index: 0;
  pointer-events: none;
  transform: rotate(-15deg) scale(0.8);
}

.zob-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  background-color: rgba(var(--bs-primary-rgb), 0.02);
}

.zob-link-card:hover .zob-link-icon {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  transform: scale(1.05) rotate(5deg);
}

.zob-link-card:hover .zob-link-details h2 {
  color: var(--bs-primary) !important;
}

.zob-link-card:hover .zob-link-arrow {
  color: var(--bs-primary) !important;
  transform: translateX(4px) translateY(-4px);
}

.zob-link-card:hover .zob-link-bg-decor {
  opacity: 0.05;
  transform: rotate(0deg) scale(1);
}

.zob-article-aside .zob-meta-author {
  font-size: 1.1rem;
  font-weight: 600;
}

.zob-article-aside .zob-meta-author a {
  color: var(--bs-heading-color);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.zob-article-aside .zob-meta-author a:hover {
  color: var(--bs-primary);
  opacity: 0.85;
}

.zob-article-aside .zob-aside-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-heading-color);
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 0.75rem;
}

.zob-article-aside .zob-aside-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background-color: var(--bs-primary);
  border-radius: 2px;
  opacity: 0.8;
}

.zob-aside-content {
  background: linear-gradient(135deg, rgba(var(--bs-secondary-rgb), 0.02) 0%, rgba(var(--bs-secondary-rgb), 0.08) 100%);
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  border: 1px solid rgba(var(--bs-secondary-rgb), 0.1);
  border-left: 4px solid var(--bs-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  margin-top: 1.5rem;
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 576px) {
  .zob-aside-content {
    padding: 1.75rem 2rem;
  }
}

.zob-aside-content p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(var(--bs-body-color-rgb), 0.9);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.zob-aside-content p:last-child {
  margin-bottom: 0;
}

.zob-aside-content blockquote {
  padding: 1rem 1.5rem;
  background-color: rgba(var(--bs-body-bg-rgb), 0.6);
  border-radius: 0.5rem;
  border-left: 3px solid var(--bs-primary);
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--bs-heading-color);
}

.zob-aside-content img {
  border-radius: 0.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  margin: 1.25rem 0;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.05);
}

[data-bs-theme="dark"] .zob-aside-content {
  background: linear-gradient(135deg, rgba(255,255,255, 0.02) 0%, rgba(255,255,255, 0.05) 100%);
  border-color: rgba(255,255,255, 0.06);
  border-left-color: rgba(255,255,255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.zob-article-aside .zob-meta-stats {
  font-weight: 500;
  margin-top: 0.3rem;
}

.zob-article-aside .zob-meta-item {
  color: rgba(var(--bs-body-color-rgb), 0.5) !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.zob-article-aside .zob-meta-item i,
.zob-article-aside .zob-meta-item svg {
  font-size: 1rem;
  color: rgba(var(--bs-secondary-rgb), 0.7) !important;
  margin-right: 0.3rem !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-block;
}

.zob-article-aside .zob-meta-item:hover,
.zob-article-aside .zob-meta-item:hover a {
  color: var(--bs-primary) !important;
}

.zob-article-aside .zob-meta-item:hover i,
.zob-article-aside .zob-meta-item:hover svg {
  color: var(--bs-primary) !important;
  transform: translateY(-2px) scale(1.1);
}

.zob-article-status {
  background: linear-gradient(135deg, rgba(var(--bs-body-bg-rgb), 1) 0%, rgba(var(--bs-success-rgb), 0.02) 100%) !important;
  border-color: rgba(var(--bs-success-rgb), 0.15) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.zob-status-main {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.zob-status-avatar-wrapper {
  width: 64px;
  height: 64px;
}

.zob-status-pulse-dot {
  width: 14px;
  height: 14px;
  background-color: #2ecc71;
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: statusPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes statusPulse {
  to {
    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }
}

.zob-status-author {
  font-size: 1.15rem;
}

.zob-status-author a {
  color: var(--bs-heading-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.zob-status-author a:hover {
  color: var(--bs-success);
}

.zob-status-title-hint {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: rgba(var(--bs-success-rgb), 0.85) !important;
}

.zob-status-text p {
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--bs-heading-color);
  letter-spacing: 0.01em;
}

.zob-status-text p:last-child {
  margin-bottom: 0;
}

.zob-status-text img {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
  margin-top: 0.75rem;
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.zob-status-content-wrapper .zob-meta-item {
  color: rgba(var(--bs-body-color-rgb), 0.55);
  transition: all 0.2s ease;
}

.zob-status-content-wrapper .zob-meta-item:hover {
  color: var(--bs-success) !important;
  transform: translateY(-1px);
}

[data-bs-theme="dark"] .zob-article-status {
  background: rgba(var(--bs-body-bg-rgb), 0.4) !important;
  border-color: rgba(52, 211, 153, 0.08) !important;
}

[data-bs-theme="dark"] .zob-article-status:hover {
  border-color: rgba(52, 211, 153, 0.2) !important;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.04) !important;
}

[data-bs-theme="dark"] .zob-status-pulse-dot {
  background-color: #34d399;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
}

[data-bs-theme="dark"] .zob-status-author a:hover,
[data-bs-theme="dark"] .zob-status-content-wrapper .zob-meta-item:hover {
  color: #a7f3d0 !important;
}

[data-bs-theme="dark"] .zob-status-title-hint {
  color: rgba(52, 211, 153, 0.8) !important;
}

.zob-article-chat {
  overflow: hidden;
}

.zob-article-chat .zob-chat-messages {
  background-color: rgba(var(--bs-secondary-rgb), 0.015);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.zob-chat-messages > p {
  margin-bottom: 0 !important;
  max-width: 85%;
  padding: 0.85rem 1.25rem;
  font-size: 1.05rem;
  line-height: 1.6;
  word-wrap: break-word;
  border-radius: 1.25rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.zob-chat-messages > p:nth-of-type(odd) {
  align-self: flex-start;
  background-color: var(--bs-body-bg);
  color: var(--bs-heading-color);
  border: 1px solid rgba(var(--bs-secondary-rgb), 0.1);
  border-bottom-left-radius: 0.25rem;
}

.zob-chat-messages > p:nth-of-type(even) {
  align-self: flex-end;
  background-color: var(--bs-primary);
  color: #ffffff;
  border-bottom-right-radius: 0.25rem;
}

.zob-chat-messages > p strong:first-child {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  opacity: 0.8;
}

.zob-chat-messages > p:nth-of-type(odd) strong:first-child {
  color: var(--bs-primary);
}

.zob-chat-messages > p:nth-of-type(even) strong:first-child {
  color: rgba(255,255,255, 0.9);
  text-align: right;
}

.zob-chat-messages > p img,
.zob-chat-messages > figure {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

[data-bs-theme="dark"] .zob-article-chat .zob-chat-messages {
  background-color: rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .zob-chat-messages > p:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

[data-bs-theme="dark"] .zob-chat-messages > p:nth-of-type(even) {
  filter: brightness(0.9) saturate(0.9);
  box-shadow: none;
}

.zob-article-section {
  border-color: rgba(148,163,184,.25);
}

[data-bs-theme="dark"] .zob-article-section {
  border-color: rgba(15,23,42,.9);
}

.zob-tag-pill {
  --_pill-bg: rgba(15,23,42,.03);
  --_pill-border: rgba(148,163,184,.5);
  --_pill-color: var(--bs-secondary-color, #6c757d);
  display: inline-flex;
  align-items: center;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--_pill-border);
  background-color: var(--_pill-bg);
  color: var(--_pill-color);
  font-weight: 500;
  line-height: 1.1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

[data-bs-theme="dark"] .zob-tag-pill {
  --_pill-bg: rgba(15,23,42,.9);
  --_pill-border: rgba(148,163,184,.6);
  --_pill-color: #e5e7eb;
}

@media (hover: hover) and (pointer: fine) {
  .zob-tag-pill:hover {
    border-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg) 88%);
    color: var(--bs-primary);
    box-shadow: 0 0 0 1px rgba(59,130,246,.15);
  }
}

.zob-copyright {
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: linear-gradient(
    135deg,
    rgba(148,163,184,.08),
    rgba(148,163,184,.02)
  );
}

[data-bs-theme="dark"] .zob-copyright {
  background: linear-gradient(
    135deg,
    rgba(15,23,42,.9),
    rgba(15,23,42,.6)
  );
}

.zob-permalink {
  word-break: break-all;
}

.zob-share-facebook {
  --_accent: #1877f2;
}

.zob-share-x {
  --_accent: #0f1419;
}

.zob-share-linkedin {
  --_accent: #0a66c2;
}

.zob-share-whatsapp {
  --_accent: #25D366;
}

.zob-share-telegram {
  --_accent: #229ED9;
}

.zob-share-pinterest {
  --_accent: #E60023;
}

.zob-share-reddit {
  --_accent: #FF4500;
}

.zob-share-email {
  --_accent: #6c757d;
}

.zob-share-weibo {
  --_accent: #E6162D;
}

.zob-share-wechat {
  --_accent: #07C160;
}

.zob-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--_accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--_accent) 15%, transparent);
  color: var(--bs-body-color);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.zob-share-btn i {
  font-size: 1rem;
  color: var(--_accent);
  transition: color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .zob-share-btn:hover {
    background-color: var(--_accent);
    border-color: var(--_accent);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--_accent) 30%, transparent);
    transform: translateY(-2px);
  }

  .zob-share-btn:hover i {
    color: #ffffff;
  }
}

[data-bs-theme="dark"] .zob-share-btn {
  background-color: color-mix(in srgb, var(--_accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--_accent) 25%, transparent);
  color: #e2e8f0;
}

[data-bs-theme="dark"] .zob-share-x {
  --_accent: #e7e9ea;
}

[data-bs-theme="dark"] .zob-share-x:hover {
  color: #0f1419;
}

[data-bs-theme="dark"] .zob-share-x:hover i {
  color: #0f1419;
}

#zob-wechat-qrcode canvas,
#zob-wechat-qrcode img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.zob-post-pages .pagination {
  --bs-pagination-border-radius: 999px;
}

.zob-post-pages .page-link {
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.6);
  background-color: rgba(15,23,42,.02);
}

[data-bs-theme="dark"] .zob-post-pages .page-link {
  background-color: rgba(15,23,42,.9);
}

@media (max-width: 991.98px) {
  .zob-post-pages .page-link:hover,
  .zob-post-pages .page-link:focus,
  .zob-post-pages .page-link:active {
    background-color: transparent;
    color: inherit;
    border-color: inherit;
    box-shadow: none;
  }
}

.zob-post-nav-bs {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 576px) {
  .zob-post-nav-bs {
    grid-template-columns: 1fr;
  }
}

.zob-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zob-post-nav-bs .btn {
  border-radius: .9rem;
  padding-inline: .9rem;
  text-align: left;
  text-decoration: none;
}

.zob-post-nav-bs .btn.btn-outline-secondary,
.zob-post-nav-bs .btn.btn-outline-secondary:visited,
.zob-post-nav-bs .btn.btn-outline-secondary:hover,
.zob-post-nav-bs .btn.btn-outline-secondary:focus,
.zob-post-nav-bs .btn.btn-outline-secondary:active {
  background-color: rgba(15,23,42,.02);
  border-color: rgba(148,163,184,.55);
  color: var(--bs-body-color);
  box-shadow: none;
}

[data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary,
[data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary:visited,
[data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary:hover,
[data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary:focus,
[data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary:active {
  background-color: rgba(15,23,42,.9);
  border-color: rgba(148,163,184,.7);
  color: #e5e7eb;
  box-shadow: none;
}

.zob-post-nav-bs .btn:visited {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .zob-post-nav-bs .btn.btn-outline-secondary:hover {
    box-shadow: 0 10px 30px rgba(15,23,42,.15);
    transform: translateY(-1px);
  }

  [data-bs-theme="dark"] .zob-post-nav-bs .btn.btn-outline-secondary:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.7);
  }
}

@media (max-width: 991.98px) {
  .zob-post-nav-bs .btn.btn-outline-secondary:hover,
  .zob-post-nav-bs .btn.btn-outline-secondary:focus,
  .zob-post-nav-bs .btn.btn-outline-secondary:active {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
    box-shadow: none;
    transform: none;
  }
}

.zob-article-content figure.wp-block-image {
  margin: 1.25rem 0;
}

.zob-article-content figure.wp-block-image figcaption {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
}

.zob-article-content .aligncenter,
.zob-article-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.zob-article-content figure.wp-block-image.aligncenter {
  text-align: center;
}

.zob-article-content .alignleft,
.zob-article-content img.alignleft,
.zob-article-content figure.alignleft {
  float: left;
  margin: .25rem 1rem 1rem 0;
}

.zob-article-content .alignright,
.zob-article-content img.alignright,
.zob-article-content figure.alignright {
  float: right;
  margin: .25rem 0 1rem 1rem;
}

.zob-article-content .wp-caption {
  max-width: 100%;
  margin: 1.25rem auto;
  text-align: center;
}

.zob-article-content .wp-caption img {
  display: block;
  margin: 0 auto;
}

.zob-article-content .wp-caption-text {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--bs-secondary-color, #6c757d);
}

.zob-article-content::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 576px) {
  .zob-article-content .alignleft,
  .zob-article-content img.alignleft,
  .zob-article-content figure.alignleft,
  .zob-article-content .alignright,
  .zob-article-content img.alignright,
  .zob-article-content figure.alignright {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    text-align: center;
  }
}

/* ============================== 模块 07 结束：单篇文章正文 / 内容排版 / 文章格式 ============================== */

/* ================================================================================
   模块 08：评论区 / 评论表单 / 点赞点踩
   --------------------------------------------------------------------------------
   功能范围：控制评论列表、评论卡片、头像、作者信息、楼层、回复按钮、评论表单、输入框、提交按钮、点赞点踩状态和 Bootstrap 评论分页。
   主要包含：`.zob-comments-area`、`.comment-list`、`.comment-body`、`.comment-avatar`、`.comment-meta`、`.comment-content`、`.comment-reply-link`、`#respond`、`.zob-comment-form-*`、`.zob-vote-link`、`.zob-comment-pagination`。
   维护建议：优化评论展示、回复层级、移动端评论间距、表单字段、点赞点踩按钮状态、分页样式时集中改本模块。
   注意事项：评论回复行为还依赖 PHP 模板和 `comment-reply.js`；本模块只负责视觉，不负责设置 `comment_parent`。
   模块边界：从此处开始，到“模块 08 结束：评论区 / 评论表单 / 点赞点踩”为止。
   ================================================================================ */

#comments.comments-area {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg, 0.85rem);
  background: var(--surface-soft, #fff);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow .2s ease,
    transform .18s ease;
}

[data-bs-theme="dark"] #comments.comments-area {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

.zob-comments-header {
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.zob-comments-header .small {
  color: var(--muted);
}

.zob-comments-header .bi {
  font-size: 1rem;
}

#comments .input-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#comments .input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary), transparent 85%);
}

#comments .zob-custom-addon {
  background: color-mix(in srgb, var(--surface) 95%, #000 5%) !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  color: var(--muted);
  min-width: 85px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#comments .input-group:focus-within .zob-custom-addon {
  background: var(--surface) !important;
  border-right-color: var(--primary) !important;
  color: var(--primary);
}

#comments .zob-interactive-input {
  border: none !important;
  background: transparent !important;
  padding: 0.6rem 0.75rem !important;
  box-shadow: none !important;
  color: var(--text);
}

#comments .zob-interactive-input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  caret-color: var(--primary);
}

#comments .zob-comment-editor-card {
  background: var(--surface, #f9fafb);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.zob-comment-toolbar .btn {
  border-radius: 999px;
  padding-inline: .55rem;
  padding-block: .25rem;
  font-size: .8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--border, #e5e7eb) 80%, transparent 20%);
  background-color: color-mix(in srgb, var(--surface, #ffffff) 90%, #f9fafb 10%);
  box-shadow: none;
  transition: background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .14s ease;
}

.zob-comment-toolbar .btn i {
  font-size: .9rem;
}

.zob-comment-toolbar .btn:hover,
.zob-comment-toolbar .btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary, #0d6efd) 55%, var(--border, #e5e7eb) 45%);
  color: var(--primary, #0d6efd);
  background-color: color-mix(in srgb, var(--surface, #ffffff) 80%, var(--primary, #0d6efd) 20%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.20);
}

[data-bs-theme="dark"] .zob-comment-toolbar .btn {
  background-color: color-mix(in srgb, var(--surface, #020617) 80%, #020617 20%);
  border-color: color-mix(in srgb, var(--border, #1e293b) 80%, transparent 20%);
  color: var(--muted, #9ca3af);
}

[data-bs-theme="dark"] .zob-comment-toolbar .btn:hover,
[data-bs-theme="dark"] .zob-comment-toolbar .btn:focus-visible {
  background-color: color-mix(in srgb, var(--primary, #3b82f6) 18%, #020617 82%);
  border-color: color-mix(in srgb, var(--primary, #3b82f6) 60%, var(--border, #1e293b) 40%);
  color: #e5edff;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

#comments .zob-comment-textarea-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
}

#comments .zob-comment-textarea {
  resize: vertical;
  min-height: 140px;
}

#comments .zob-comment-editor-card .small.text-muted {
  font-size: .8rem;
}

.zero-list-control {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.zero-list-control .avatar,
.zero-list-control img.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10%;
  object-fit: cover;
}

.zero-list-control-right {
  flex: 1;
  min-width: 0;
}

.zero-list-control-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--wp--preset--spacing--20, .75rem);
  min-height: 2rem;
  color: #fff;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 88%, #000 12%) 0%,
    color-mix(in srgb, var(--accent) 88%, #000 12%) 100%
  );
  border-radius: var(--radius-sm);
}

[data-bs-theme="dark"] .zero-list-control-top {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 80%, white 20%) 0%,
    color-mix(in srgb, var(--accent) 80%, white 20%) 100%
  );
}

.zero-list-control-top strong {
  line-height: 1.25;
}

.zero-list-control-right .fw-light {
  margin-top: .5rem;
  line-height: 1.5;
  color: var(--muted);
}

#comments .comment-body {
  border-radius: var(--radius-lg, .85rem);
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #f9fafb);
  padding: .75rem .75rem .5rem;
  transition: background-color var(--transition-med, .25s),
    border-color var(--transition-med, .25s),
    box-shadow .2s ease,
    transform .12s ease;
}

[data-bs-theme="dark"] #comments .comment-body {
  background: color-mix(in srgb, var(--surface-soft, #020617) 95%, #fff 5%);
}

#comments > ul,
#comments > ol {
  margin: 0;
  padding-left: 0;
}

#comments ul.children,
#comments ol.children {
  margin: .5rem 0 0 2rem;
  padding-left: .75rem;
  border-left: 2px dashed rgba(148, 163, 184, 0.35);
}

.zero-list-control-bottom {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--muted);
}

#comments .comment-reply-link {
  font-size: .8rem;
}

.comment-vote {
  font-size: .9rem;
  color: var(--muted);
  user-select: none;
}

.comment-vote .zob-vote-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color .2s ease, transform .1s ease;
}

@media (hover: hover) {
  .comment-vote .zob-vote-link:hover {
    transform: translateY(-1px);
  }
}

.comment-vote .vote-up:hover {
  color: #056de8;
}

.comment-vote .vote-down:hover {
  color: #e02433;
}

.comment-vote .zob-vote-link.active {
  font-weight: 600;
}

.comment-vote .vote-up.active {
  color: #056de8;
}

.comment-vote .vote-down.active {
  color: #e02433;
}

.comment-vote .bi {
  font-size: 1.1rem;
  line-height: 1;
}

.comment-vote .ms-1 {
  margin-left: .25rem !important;
}

#comments .comment-content {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--text);
}

#comments .comment-content p {
  margin-bottom: .45rem;
}

#comments .comment-content blockquote {
  position: relative;
  margin: .75rem 0;
  padding: .6rem .9rem .6rem 1.1rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--primary) 12%);
  border-left: 3px solid var(--primary);
}

[data-bs-theme="dark"] #comments .comment-content blockquote {
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--primary) 20%);
}

#comments .comment-content code {
  display: inline-block;
  padding: 0 .3rem;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--surface-soft) 80%, #000 8%);
  font-size: .85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

#comments .comment-content pre {
  margin: .75rem 0;
  padding: .75rem .9rem;
  border-radius: var(--radius-md, .6rem);
  background: #0b1020;
  color: #e5e9f0;
  font-size: .85rem;
  overflow-x: auto;
}

#comments .comment-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

#comments li.comment {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0;
  padding-left: 0;
}

#comments li.comment::marker {
  content: "" !important;
  font-size: 0 !important;
  color: transparent !important;
}

#comments ul.children,
#comments ol.children {
  list-style: none !important;
  list-style-type: none !important;
}

#comments ul.children > li,
#comments ol.children > li {
  list-style: none !important;
  list-style-type: none !important;
}

@media (max-width: 575.98px) {
  #comments ul.children,
  #comments ol.children {
    margin: .4rem 0 0 1rem;
    padding-left: .5rem;
    border-left-width: 1px;
  }

  #comments ul.children ul.children,
  #comments ol.children ol.children {
    margin-left: .7rem;
    padding-left: .4rem;
  }

  .zero-list-control-top {
    flex-wrap: wrap;
    padding-inline: .5rem;
    row-gap: .15rem;
  }

  .zero-list-control-top > .flex-grow-1 {
    flex: 0 0 70%;
  }

  .zero-list-control-top > :not(.flex-grow-1) {
    font-size: .75rem;
    opacity: .9;
  }

  .zero-list-control-bottom {
    display: flex;
    flex-wrap: wrap;
    row-gap: .15rem;
  }

  .zero-list-control-bottom > * {
    margin-right: .5rem;
  }

  #comments.comments-area {
    padding: 1rem 1.1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #comments ul.children,
  #comments ol.children {
    margin-left: 1.4rem;
  }

  #comments ul.children ul.children,
  #comments ol.children ol.children {
    margin-left: 1.1rem;
  }

  #comments.comments-area {
    padding: 1.1rem 1.25rem;
  }
}

/* ============================== 模块 08 结束：评论区 / 评论表单 / 点赞点踩 ============================== */

/* ================================================================================
   模块 09：网站统计小工具
   --------------------------------------------------------------------------------
   功能范围：
   1）控制网站统计小工具的整体面板、标题栏、统计卡片、图标、说明文字、
      高浏览量数字、单位显示、hover 动效和明暗模式。
   2）适配新版 HTML 结构：
      - .zob-stats-panel
      - .zob-stats-panel__head
      - .zob-stats-panel__icon
      - .zob-stats-panel__title
      - .zob-stats-panel__grid
      - .zob-stat-card
      - .zob-stat-card__icon
      - .zob-stat-card__main
      - .zob-stat-card__text
      - .zob-stat-card__label
      - .zob-stat-card__desc
      - .zob-stat-card__value
      - .zob-stat-card__number
      - .zob-stat-card__unit
   3）设计目标：
      - 更符合 ZOB 主题的轻量卡片风格。
      - 顶部只保留一行 Website Statistics。
      - PC / Pad / 手机端不挤压。
      - 浏览量达到 K / M / B / T 级别时仍稳定显示。
      - 完整数字保留在 title / aria-label 中。
      - 白天 / 黑夜模式自然适配。
   ================================================================================ */


/* ========== 09.1 外层统计面板 ========== */

.zob-stats-panel {
  width: 100%;
  min-width: 0;

  padding: .25rem 0 1rem;

  color: var(--text, var(--bs-body-color));

  transition:
    color var(--transition-med, .25s) ease,
    background-color var(--transition-med, .25s) ease;
}


/* ========== 09.2 顶部标题栏：单行标题 ========== */

.zob-stats-panel__head {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;

  min-width: 0;

  padding: .2rem 0 .9rem;
  margin: 0 0 .85rem;

  border-bottom: 1px solid var(--border, var(--bs-border-color));
}

.zob-stats-panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 3.5rem;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--primary, var(--bs-primary)),
    color-mix(in srgb, var(--primary, var(--bs-primary)) 25%, transparent)
  );
}

.zob-stats-panel__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 12%,
    transparent
  );

  border: 1px solid color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  line-height: 1;
}

.zob-stats-panel__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

.zob-stats-panel__title {
  margin: 0;

  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ========== 09.3 暗色模式标题栏 ========== */

[data-bs-theme="dark"] .zob-stats-panel__icon {
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 35%,
    transparent
  );
}


/* ========== 09.4 统计卡片列表 ========== */

.zob-stats-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;

  width: 100%;
  min-width: 0;
}


/* ========== 09.5 单张统计卡片 ========== */

.zob-stat-card {
  position: relative;

  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  align-items: center;
  gap: .78rem;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding: .88rem .92rem;

  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, var(--bs-border-color));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 96%, #fff 4%),
      var(--surface-soft, var(--bs-tertiary-bg))
    );

  color: var(--text, var(--bs-body-color));

  box-shadow: 0 .45rem 1.1rem rgba(15, 23, 42, .055);

  transition:
    transform .18s ease,
    background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow var(--transition-med, .25s) ease,
    color var(--transition-med, .25s) ease;
}

.zob-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background: currentColor;
  opacity: .35;

  pointer-events: none;
}


/* ========== 09.6 暗色模式统计卡片 ========== */

[data-bs-theme="dark"] .zob-stat-card {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 90%, #fff 4%),
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 86%, #000 14%)
    );

  border-color: var(--border, rgba(255,255,255,.1));

  box-shadow: 0 .8rem 1.7rem rgba(0, 0, 0, .42);
}


/* ========== 09.7 左侧图标 ========== */

.zob-stat-card__icon {
  width: 2.55rem;
  height: 2.55rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .95rem;

  color: var(--bs-primary);

  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

  line-height: 1;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.zob-stat-card__icon i {
  font-size: 1.1rem;
  line-height: 1;
}

[data-bs-theme="dark"] .zob-stat-card__icon {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}


/* ========== 09.8 统计类型配色 ========== */

.zob-stat-card--primary {
  color: var(--bs-primary);
}

.zob-stat-card--success {
  color: var(--bs-success);
}

.zob-stat-card--info {
  color: var(--bs-info);
}

/* 卡片正文文字恢复主题正文色，避免整张卡片文字全部变成状态色 */
.zob-stat-card__main,
.zob-stat-card__text,
.zob-stat-card__label,
.zob-stat-card__desc {
  color: var(--text, var(--bs-body-color));
}

.zob-stat-card--primary .zob-stat-card__icon,
.zob-stat-card--primary .zob-stat-card__value {
  color: var(--bs-primary);
}

.zob-stat-card--success .zob-stat-card__icon,
.zob-stat-card--success .zob-stat-card__value {
  color: var(--bs-success);
}

.zob-stat-card--info .zob-stat-card__icon,
.zob-stat-card--info .zob-stat-card__value {
  color: var(--bs-info);
}


/* ========== 09.9 卡片主体布局 ========== */

.zob-stat-card__main {
  display: grid;

  /*
   * 左侧文字：占剩余空间，可换行。
   * 右侧数字：按内容宽度显示，但不允许撑爆。
   */
  grid-template-columns: minmax(0, 1fr) max-content;

  align-items: center;
  gap: .75rem;

  min-width: 0;
  width: 100%;
}


/* ========== 09.10 标题和说明文字 ========== */

.zob-stat-card__text {
  min-width: 0;
  max-width: 100%;
}

.zob-stat-card__label {
  margin: 0 0 .18rem;

  color: var(--bs-emphasis-color);

  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.zob-stat-card__desc {
  margin: 0;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .77rem;
  line-height: 1.45;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

[data-bs-theme="dark"] .zob-stat-card__desc {
  color: color-mix(
    in srgb,
    var(--muted, var(--bs-secondary-color)) 88%,
    #fff 12%
  );
}


/* ========== 09.11 右侧数字：高浏览量显示核心 ========== */

.zob-stat-card__value {
  justify-self: end;

  min-width: 0;
  max-width: 7rem;

  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .08em;

  text-align: right;
  white-space: nowrap;

  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.zob-stat-card__number {
  display: inline-block;

  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 780;
  line-height: 1.05;

  letter-spacing: -.02em;
}

.zob-stat-card__unit {
  display: inline-block;

  font-size: .72rem;
  font-weight: 700;
  line-height: 1;

  opacity: .88;
}


/* ========== 09.12 Hover / Focus ========== */

@media (hover: hover) and (pointer: fine) {
  .zob-stat-card:hover {
    transform: translateY(-2px);

    border-color: color-mix(
      in srgb,
      var(--border, var(--bs-border-color)) 55%,
      currentColor 45%
    );

    box-shadow: 0 .85rem 1.65rem rgba(15, 23, 42, .11);
  }

  .zob-stat-card:hover .zob-stat-card__icon {
    transform: scale(1.04);
  }

  [data-bs-theme="dark"] .zob-stat-card:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .55);
  }
}

.zob-stat-card:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 09.13 Pad / 中等屏优化 ========== */

@media (min-width: 576px) and (max-width: 1024px) {
  .zob-stat-card {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .68rem;

    padding: .84rem .86rem;
  }

  .zob-stat-card__icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .85rem;
  }

  .zob-stat-card__main {
    gap: .65rem;
  }

  .zob-stat-card__label {
    font-size: .9rem;
  }

  .zob-stat-card__desc {
    font-size: .75rem;
  }

  .zob-stat-card__number {
    font-size: 1rem;
  }

  .zob-stat-card__unit {
    font-size: .68rem;
  }
}


/* ========== 09.14 手机端优化 ========== */

@media (max-width: 575.98px) {
  .zob-stats-panel {
    padding-top: .75rem;
    padding-bottom: .9rem;
  }

  .zob-stats-panel__head {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: .6rem;

    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }

  .zob-stats-panel__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .75rem;
  }

  .zob-stats-panel__title {
    font-size: 1rem;
  }

  .zob-stat-card {
    grid-template-columns: 2.12rem minmax(0, 1fr);
    align-items: flex-start;
    gap: .65rem;

    padding: .82rem .78rem;

    border-radius: .9rem;
  }

  .zob-stat-card__icon {
    width: 2.12rem;
    height: 2.12rem;

    margin-top: .03rem;

    border-radius: .76rem;
  }

  .zob-stat-card__main {
    align-items: flex-start;
    gap: .5rem;
  }

  .zob-stat-card__label {
    font-size: .88rem;
    line-height: 1.35;
  }

  .zob-stat-card__desc {
    font-size: .735rem;
    line-height: 1.45;
  }

  .zob-stat-card__value {
    max-width: 5.5rem;
  }

  .zob-stat-card__number {
    font-size: .98rem;
  }

  .zob-stat-card__unit {
    font-size: .65rem;
  }
}


/* ========== 09.15 极窄屏兜底 ========== */

@media (max-width: 380px) {
  .zob-stat-card {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    gap: .55rem;
  }

  .zob-stat-card__icon {
    width: 1.95rem;
    height: 1.95rem;
  }

  /*
   * 极窄屏时，数字下移到说明下方。
   * 即使单位是 T，也不会挤压标题和说明。
   */
  .zob-stat-card__main {
    grid-template-columns: 1fr;
    gap: .38rem;
  }

  .zob-stat-card__value {
    justify-self: end;

    max-width: 100%;

    white-space: normal;
  }
}


/* ========== 09.16 超小屏兜底 ========== */

@media (max-width: 320px) {
  .zob-stat-card__value {
    display: flex;
    flex-wrap: wrap;
    row-gap: .08rem;

    max-width: 100%;
  }

  .zob-stat-card__number,
  .zob-stat-card__unit {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* ========== 09.17 减少动效模式 ========== */

@media (prefers-reduced-motion: reduce) {
  .zob-stats-panel,
  .zob-stats-panel *,
  .zob-stats-panel *::before,
  .zob-stats-panel *::after {
    transition: none !important;
  }

  .zob-stat-card:hover,
  .zob-stat-card:hover .zob-stat-card__icon {
    transform: none !important;
  }
}


/* ============================== 模块 09 结束：网站统计小工具 ============================== */

/* ================================================================================
   模块 10：下拉菜单 / 按钮 / 导航统一色彩
   --------------------------------------------------------------------------------
   功能范围：统一 Bootstrap 下拉菜单、按钮、导航相关组件在明暗模式下的背景、边框、文字和悬停状态。
   主要包含：`.dropdown-menu`、`.dropdown-item`、`.btn`、`.navbar`、`.nav-link`、全局按钮/菜单细节补丁。
   维护建议：优化全站下拉菜单颜色、按钮 hover、导航链接状态、夜间模式菜单对比度时集中改本模块。
   注意事项：这里属于全局组件覆盖层，可能影响顶部导航、侧栏、页脚和小工具中的 Bootstrap 组件。
   模块边界：从此处开始，到“模块 10 结束：下拉菜单 / 按钮 / 导航统一色彩”为止。
   ================================================================================ */

.dropdown-menu {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.dropdown-divider {
  border-top-color: var(--border);
}

.btn-primary {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 78%, black 22%);
  color: var(--primary-contrast);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 88%, black 12%);
  border-color: color-mix(in srgb, var(--primary) 68%, black 32%);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, currentColor 45%);
  background: transparent;
}

.btn-outline-primary:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-color: var(--primary);
}

:where(.btn, .dropdown-item, .nav-link, .page-link):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--focus) 35%, transparent);
}

.nav-pills .nav-link {
  color: var(--text);
  border-radius: .5rem;
}

.nav-pills .nav-link:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.nav-pills .nav-link.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.pagination .page-item:not(.active) .page-link {
  color: var(--link);
  border-color: var(--border);
}

.pagination .page-item:not(.active) .page-link:hover {
  color: var(--link-hover);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--border) 60%, var(--primary) 40%);
}

.pagination .page-item.active .page-link {
  color: var(--primary-contrast, #fff);
  background-color: var(--primary);
  border-color: var(--primary);
}

.pagination .page-item.disabled .page-link {
  color: var(--muted, #9ca3af);
  background-color: transparent;
  border-color: var(--border);
}

/* ============================== 模块 10 结束：下拉菜单 / 按钮 / 导航统一色彩 ============================== */

/* ================================================================================
   模块 11：可访问性辅助类
   --------------------------------------------------------------------------------
   功能范围：提供屏幕阅读器、键盘导航、隐藏文本或辅助视觉状态相关的通用工具类。
   主要包含：`.visually-hidden`、`.screen-reader-text` 或同类辅助选择器。
   维护建议：只有在优化无障碍文本、跳转链接、辅助隐藏内容时才修改本模块。
   注意事项：不要随意删除这类规则，否则可能影响键盘用户和屏幕阅读器用户。
   模块边界：从此处开始，到“模块 11 结束：可访问性辅助类”为止。
   ================================================================================ */

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.btn-high-contrast {
  background: var(--text);
  color: var(--bg);
  border-radius: .375rem;
  padding: .4rem .75rem;
  display: inline-block;
}

/* ============================== 模块 11 结束：可访问性辅助类 ============================== */

/* ================================================================================
   模块 12：打印样式
   --------------------------------------------------------------------------------
   功能范围：控制网页打印时隐藏不必要区域、调整背景、文字、链接和布局，提升文章打印可读性。
   主要包含：`@media print` 下的导航、侧栏、按钮、动画、正文、链接等打印规则。
   维护建议：优化打印文章、隐藏交互组件、去掉阴影背景、保留正文内容时集中改本模块。
   注意事项：打印样式不会影响正常屏幕显示；改动后可用浏览器打印预览验证。
   模块边界：从此处开始，到“模块 12 结束：打印样式”为止。
   ================================================================================ */

@media print {
  :root, html, body {
    background: #fff !important;
    color: #000 !important;
  }

  header.navbar, #sidebar, .intro-overlay, .offcanvas, .btn, .topbar, .search, .zob-stats-widget .list-group-item {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    width: 100% !important;
  }

  .single-article, .post-content {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: .85em;
  }

  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    color: #000 !important;
    background: transparent !important;
    border-inline-start: .2rem solid #000 !important;
  }
}

/* ============================== 模块 12 结束：打印样式 ============================== */

/* ================================================================================
   模块 13：页脚兼容补丁 / 小优化
   --------------------------------------------------------------------------------
   功能范围：处理页脚或全局区域中的小型兼容修正、细节补丁和旧结构过渡样式。
   主要包含：页脚相关补丁类、零散兼容选择器、局部布局修正。
   维护建议：后期如果发现某些旧模板或页脚局部样式不稳定，可以先在本模块做兼容过渡。
   注意事项：这是补丁性质模块，长期建议逐步合并到更明确的页脚或组件模块中，避免后期积累过多零散覆盖。
   模块边界：从此处开始，到“模块 13 结束：页脚兼容补丁 / 小优化”为止。
   ================================================================================ */

* {
  overflow-wrap: anywhere;
}

.card, .list-group-item, .post-nav {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

/*
   说明：页脚基础样式已统一放到模块 15。
   本模块只保留全局兼容补丁，避免同一组 #site-footer 规则在两个模块中重复维护。
*/

/* ============================== 模块 13 结束：页脚兼容补丁 / 小优化 ============================== */

/* ================================================================================
   模块 14：面包屑导航
   --------------------------------------------------------------------------------
   功能范围：控制文章页、页面、产品页、归档页等面包屑导航的布局、截断、边框、图标和移动端适配。
   主要包含：`.zob-list-nav`、`.breadcrumb`、`.breadcrumb-item`、当前项 `.active`、截断类和图标间距。
   维护建议：优化面包屑字号、单行截断、移动端溢出、当前项样式、明暗模式边框时集中改本模块。
   注意事项：面包屑经常包含长标题；应保持 `min-width:0`、`text-truncate` 和 `flex-wrap` 逻辑稳定。
   模块边界：从此处开始，到“模块 14 结束：面包屑导航”为止。
   ================================================================================ */

.zob-list-nav {
  min-width: 0;
  overflow: hidden;
}

.zob-list-nav .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 0.95rem !important;
  line-height: 1.5;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.zob-list-nav .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.zob-list-nav .breadcrumb-item:not(.active) {
  flex: 0 0 auto;
}

.zob-list-nav .breadcrumb-item:not(.active) > a {
  display: inline-block;
  max-width: clamp(4.5rem, 14vw, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-heading-color, #212529);
  transition: color 0.2s ease;
}

.zob-list-nav .breadcrumb-item:not(.active) > a:hover {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
}

.zob-list-nav .breadcrumb-item.active {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-secondary-color, #6c757d);
}

.zob-list-nav .breadcrumb-item.active.text-truncate {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zob-list-nav .breadcrumb-item + .breadcrumb-item::before {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.55;
  color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 991.98px) {
  .zob-list-nav .breadcrumb {
    font-size: 0.9rem !important;
  }

  .zob-list-nav .breadcrumb-item:not(.active) > a {
    max-width: clamp(4rem, 18vw, 9rem);
  }
}

@media (max-width: 575.98px) {
  .zob-list-nav .breadcrumb {
    font-size: 0.86rem !important;
  }

  .zob-list-nav .breadcrumb-item:not(.active) > a {
    max-width: 5.2rem;
  }

  .zob-list-nav .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
  }
}

@media (max-width: 359.98px) {
  .zob-list-nav .breadcrumb-item:not(.active) > a {
    max-width: 4.2rem;
  }

  .zob-list-nav .breadcrumb {
    font-size: 0.82rem !important;
  }
}

[data-bs-theme="dark"] .zob-list-nav .breadcrumb {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .zob-list-nav .breadcrumb-item:not(.active) > a {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .zob-list-nav .breadcrumb-item:not(.active) > a:hover {
  color: #60a5fa;
}

[data-bs-theme="dark"] .zob-list-nav .breadcrumb-item.active {
  color: #94a3b8;
}

[data-bs-theme="dark"] .zob-list-nav .breadcrumb-item + .breadcrumb-item::before {
  color: #94a3b8;
}

/* ============================== 模块 14 结束：面包屑导航 ============================== */

/* ================================================================================
   模块 15：页脚基础
   --------------------------------------------------------------------------------
   功能范围：控制主页脚背景、文字、链接、分隔线、版权信息、备案信息、社交入口等基础视觉。
   主要包含：`.site-footer`、页脚容器、页脚链接、版权行、备案/公安等底部文本。
   维护建议：优化页脚整体颜色、间距、链接状态、明暗模式对比度时集中改本模块。
   注意事项：页脚通常全站复用，修改后要检查首页、文章页、产品页、404 页的底部显示。
   模块边界：从此处开始，到“模块 15 结束：页脚基础”为止。
   ================================================================================ */

#site-footer.zob-footer {
  --zob-muted: var(--bs-secondary-color, rgba(108,117,125,.88));
  --zob-border: var(--bs-border-color, rgba(0,0,0,.08));
  --zob-qr-bg: rgba(0,0,0,.02);
}

[data-bs-theme="dark"] #site-footer.zob-footer {
  --zob-muted: var(--bs-secondary-color, rgba(222,226,230,.82));
  --zob-border: var(--bs-border-color, rgba(255,255,255,.14));
  --zob-qr-bg: rgba(255,255,255,.03);
}

#site-footer.zob-footer .zf-cta-row {
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
  max-width: 100%;
  margin-inline: auto;
}

#site-footer h6 {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  margin-bottom: .25rem !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

#site-footer .xsmall {
  font-size: .8125rem;
  color: var(--zob-muted);
}

#site-footer .btn.btn-sm {
  height: 32px;
  padding: .25rem .65rem;
  border-radius: .6rem;
}

#site-footer .w-100.d-flex.justify-content-center form {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
}

#site-footer .w-100.d-flex.justify-content-center input[type="email"],
#site-footer .w-100.d-flex.justify-content-center input[type="text"] {
  height: 32px;
  padding: .25rem .5rem;
  font-size: .9rem;
  border-radius: .5rem;
  min-width: clamp(220px, 42vw, 320px);
}

#site-footer .w-100.d-flex.justify-content-center input[type="submit"],
#site-footer .w-100.d-flex.justify-content-center button[type="submit"] {
  height: 32px;
  padding: .25rem .75rem;
  font-size: .9rem;
  border-radius: .6rem;
}

#site-footer #zf-qr-inline {
  width: clamp(96px, 24vw, 140px);
  max-height: 140px;
  object-fit: contain;
  padding: .5rem;
  background: rgba(0,0,0,.02);
  border-color: var(--bs-border-color) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: .75rem !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

[data-bs-theme="dark"] #site-footer #zf-qr-inline {
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

#site-footer p {
  margin-bottom: .35rem;
}

#site-footer .border-top {
  border-color: var(--zob-border) !important;
}

#site-footer .pt-2 {
  padding-top: .75rem !important;
}

#site-footer .py-2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* ============================== 模块 15 结束：页脚基础 ============================== */

/* ================================================================================
   模块 16：页脚 CTA / 联系客服 / 二维码
   --------------------------------------------------------------------------------
   功能范围：控制页脚营销行动区、客服入口、二维码图片、联系方式卡片和悬浮/按钮类交互。
   主要包含：页脚 CTA 区块、客服按钮、二维码容器、联系信息、明暗模式二维码适配。
   维护建议：优化底部询盘转化、二维码大小、联系客服按钮、页脚行动按钮时集中改本模块。
   注意事项：二维码图片可能分白天/黑夜两套资源；改尺寸时要同时检查图片清晰度和移动端占位。
   模块边界：从此处开始，到“模块 16 结束：页脚 CTA / 联系客服 / 二维码”为止。
   ================================================================================ */

.zob-footer .zf-cta-row > .col {
  display: flex;
}

.zob-footer .zf-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 0.9rem);
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface-soft, #ffffff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  padding: 1rem 1.25rem;
  display: flex;
  transition: background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow .22s ease,
    transform .18s ease;
}

[data-bs-theme="dark"] .zob-footer .zf-cta-card {
  background: color-mix(in srgb, var(--surface-soft, #020617) 88%, #020617 12%);
  border-color: color-mix(in srgb, var(--border, #1f2937) 70%, var(--primary, #60a5fa) 30%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
}

.zob-footer .zf-cta-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.zob-footer .zf-cta-body {
  width: 100%;
}

.zob-footer .zf-cta-head {
  position: relative;
}

.zob-footer .zf-cta-icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
  color: var(--primary, #2563eb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, #2563eb) 55%, transparent),
    0 8px 18px rgba(37, 99, 235, 0.30);
  flex-shrink: 0;
}

[data-bs-theme="dark"] .zob-footer .zf-cta-icon {
  background: color-mix(in srgb, var(--primary, #60a5fa) 24%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, #60a5fa) 45%, transparent),
    0 10px 26px rgba(15, 23, 42, 0.9);
}

.zob-footer .zf-cta-icon i {
  font-size: 1.1rem;
}

.zob-footer .zf-cta-title {
  font-size: .98rem;
}

.zob-footer .zf-cta-note {
  max-width: 260px;
}

.zob-footer .zf-cta-btn {
  margin-top: .25rem;
  border-radius: 999px;
  padding-inline: 1.1rem;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
  transition: transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.zob-footer .zf-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.36);
}

.zob-footer .zf-cta-kefu {
  background-image: url("../zob/assets/svg/zob-cta-kefu-bg-v2.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

.zob-footer .zf-cta-kefu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
      90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.90) 32%,
      rgba(255,255,255,.72) 56%,
      transparent 100%
    );
  pointer-events: none;
}

[data-bs-theme="dark"] .zob-footer .zf-cta-kefu::before {
  background: linear-gradient(
      90deg,
      rgba(15,23,42,.98) 0%,
      rgba(15,23,42,.94) 32%,
      rgba(15,23,42,.78) 56%,
      transparent 100%
    );
}

.zob-footer .zf-cta-kefu .zf-cta-body,
.zob-footer .zf-cta-kefu .zf-cta-text {
  position: relative;
  z-index: 1;
}

.zob-footer .zf-cta-kefu .zf-cta-body {
  min-height: 130px;
  display: flex;
  align-items: center;
}

.zob-footer .zf-cta-text {
  max-width: 260px;
}

.zob-footer .zf-cta-qr {
  background-image: url("../zob/assets/svg/zob-cta-qr-bg-v2.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.zob-footer .zf-cta-qr::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.90) 36%,
      rgba(255,255,255,.70) 62%,
      transparent 100%);
  pointer-events: none;
}

[data-bs-theme="dark"] .zob-footer .zf-cta-qr::before {
  background: radial-gradient(circle at 50% 45%,
      rgba(15,23,42,.98) 0%,
      rgba(15,23,42,.92) 36%,
      rgba(15,23,42,.74) 62%,
      transparent 100%);
}

.zob-footer .zf-cta-qr .zf-cta-body {
  position: relative;
  z-index: 1;
}

.zob-footer .zf-qr-shell {
  position: relative;
  padding: .45rem;
  border-radius: 1.1rem;
}

.zob-footer .zf-qr-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0%,
      rgba(129,140,248,.65),
      transparent 60%),
    radial-gradient(circle at 80% 100%,
      rgba(244,114,182,.50),
      transparent 60%);
  opacity: .26;
  filter: blur(1px);
  pointer-events: none;
  animation: zob-qr-breathe 3.2s ease-in-out infinite;
}

.zob-footer .zf-qr-inner {
  position: relative;
  border-radius: .9rem;
  background-color: #ffffff;
  padding: .4rem;
  box-shadow: 0 12px 34px rgba(15,23,42,.32);
  transition: transform .18s ease, box-shadow .18s ease;
}

.zob-footer .zf-qr-img {
  display: block;
  max-width: 136px;
  height: auto;
  border-radius: .7rem;
}

.zob-footer .zf-cta-qr:hover .zf-qr-inner {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 18px 46px rgba(15,23,42,.40);
}

@keyframes zob-qr-breathe {
  0% {
    opacity: .22;
    transform: translateY(0);
  }

  50% {
    opacity: .38;
    transform: translateY(-1px) scale(1.02);
  }

  100% {
    opacity: .22;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .zob-footer .zf-cta-card {
    padding: .9rem .95rem;
  }

  .zob-footer .zf-cta-text {
    max-width: 100%;
    text-align: center;
  }

  .zob-footer .zf-cta-note {
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .zob-footer .zf-cta-kefu .zf-cta-body {
    justify-content: flex-start;
  }

  .zob-footer .zf-cta-qr .zf-cta-body {
    align-items: center;
  }
}

/* ============================== 模块 16 结束：页脚 CTA / 联系客服 / 二维码 ============================== */

/* ================================================================================
   模块 17：联系页面表单
   --------------------------------------------------------------------------------
   功能范围：控制联系我们页面表单的输入组、标签、图标、提示文字、聚焦状态、提交按钮、校验反馈和移动端布局。
   主要包含：`#contact-form`、`.input-group`、`.zob-custom-addon`、`.zob-interactive-input`、联系页面按钮和说明文案区域。
   维护建议：优化联系页字段宽度、电话/邮箱输入框、必填标识、聚焦边框、错误提示、移动端表单间距时集中改本模块。
   注意事项：联系页表单可能与产品询价表单、评论表单同时存在；避免复用过泛的 `#email`、`.form-control` 直接覆盖。
   模块边界：从此处开始，到“模块 17 结束：联系页面表单”为止。
   ================================================================================ */

.zob-contact-form .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.zob-contact-form .input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary), transparent 85%);
}

.zob-contact-form .zob-custom-addon {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  flex: 0 0 120px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface) 95%, #000 5%) !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.zob-contact-form .input-group:focus-within .zob-custom-addon {
  color: var(--primary) !important;
  background: var(--surface) !important;
  border-right-color: var(--primary) !important;
}

.zob-contact-form .zob-custom-addon .addon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
}

.zob-contact-form .zob-custom-addon .addon-text .text-danger {
  display: inline;
  flex-shrink: 0;
}

.zob-contact-form .zob-interactive-input {
  display: block;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  max-width: 100%;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.6rem 0.75rem !important;
  box-shadow: none !important;
  outline: none !important;
}

.zob-contact-form .zob-interactive-input:focus {
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--primary);
}

.zob-contact-form .zob-interactive-input::placeholder {
  color: var(--muted) !important;
  opacity: 0.72;
}

.zob-contact-editor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.zob-contact-editor-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary), transparent 85%);
}

.zob-contact-editor-card .card-body {
  background: transparent;
}

.zob-contact-textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  resize: vertical;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.75rem !important;
  box-shadow: none !important;
  outline: none !important;
}

.zob-contact-textarea:focus {
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--primary);
}

.zob-contact-textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.72;
}

.zob-contact-form input:-webkit-autofill,
.zob-contact-form input:-webkit-autofill:hover,
.zob-contact-form input:-webkit-autofill:focus,
.zob-contact-form textarea:-webkit-autofill,
.zob-contact-form textarea:-webkit-autofill:hover,
.zob-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  border-color: transparent !important;
  transition: background-color 9999s ease-in-out 0s;
}

[data-bs-theme="dark"] .zob-contact-form .input-group,
[data-bs-theme="dark"] .zob-contact-editor-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-bs-theme="dark"] .zob-contact-form .zob-custom-addon {
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface) 85%, #fff 15%) !important;
  border-right-color: var(--border) !important;
}

[data-bs-theme="dark"] .zob-contact-form .input-group:focus-within .zob-custom-addon {
  color: var(--primary) !important;
  background: var(--surface) !important;
  border-right-color: var(--primary) !important;
}

[data-bs-theme="dark"] .zob-contact-form .zob-interactive-input,
[data-bs-theme="dark"] .zob-contact-textarea {
  color: var(--text) !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .zob-contact-form .zob-interactive-input:focus,
[data-bs-theme="dark"] .zob-contact-textarea:focus {
  color: var(--text) !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .zob-contact-form .zob-interactive-input::placeholder,
[data-bs-theme="dark"] .zob-contact-textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.7;
}

[data-bs-theme="dark"] .zob-contact-form input:-webkit-autofill,
[data-bs-theme="dark"] .zob-contact-form input:-webkit-autofill:hover,
[data-bs-theme="dark"] .zob-contact-form input:-webkit-autofill:focus,
[data-bs-theme="dark"] .zob-contact-form textarea:-webkit-autofill,
[data-bs-theme="dark"] .zob-contact-form textarea:-webkit-autofill:hover,
[data-bs-theme="dark"] .zob-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
}

@media (max-width: 767.98px) {
  .zob-contact-form .input-group {
    flex-wrap: nowrap;
  }

  .zob-contact-form .zob-custom-addon {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    flex: 0 0 92px;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.8125rem;
  }

  .zob-contact-form .zob-interactive-input {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .zob-contact-form .zob-custom-addon {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    flex-basis: 84px;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zob-contact-form .input-group,
    .zob-contact-form .zob-custom-addon,
    .zob-contact-form .zob-interactive-input,
    .zob-contact-editor-card,
    .zob-contact-textarea {
    transition: none !important;
  }
}

/* ============================== 模块 17 结束：联系页面表单 ============================== */

/* ================================================================================
   模块 18：产品归档 / 产品分类 / 产品卡片
   --------------------------------------------------------------------------------
   功能范围：控制产品归档页、产品分类页、产品筛选标签、产品网格、产品卡片、缩略图、库存/价格/分类徽标和移动端布局。
   主要包含：`.zob-product-archive-*`、`.zob-product-category-filter`、`.zob-product-cat-pill`、`.zob-product-card`、`.zob-product-thumb`、`.zob-product-img`、产品标题/摘要/元信息。
   维护建议：优化产品列表页、分类页、卡片 4:3 图片比例、标签选中状态、库存徽章、1024px/移动端布局时集中改本模块。
   注意事项：产品归档和首页产品区可能共享部分类名；改产品卡片时应同时检查产品首页、分类页、标签页。
   模块边界：从此处开始，到“模块 18 结束：产品归档 / 产品分类 / 产品卡片”为止。
   ================================================================================ */

.zob-product-category-filter {
  position: relative;
}

.zob-product-category-filter .d-flex {
  row-gap: .625rem;
}

.zob-product-category-filter .zob-product-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  line-height: 1.25;
  font-size: .875rem;
  font-weight: 500;
  border-color: var(--bs-border-color-translucent) !important;
  background-color: var(--bs-body-bg);
  transition: transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.zob-product-category-filter .zob-product-cat-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--bs-primary-rgb), .35) !important;
  background-color: rgba(var(--bs-primary-rgb), .06);
  box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08);
}

.zob-product-category-filter .zob-product-cat-pill.is-active {
  border-color: rgba(var(--bs-primary-rgb), .55) !important;
  box-shadow: 0 .45rem 1.1rem rgba(var(--bs-primary-rgb), .22);
}

.zob-product-category-filter .zob-product-cat-pill.is-parent-active {
  box-shadow: 0 .25rem .85rem rgba(var(--bs-primary-rgb), .12);
}

.zob-product-grid {
  --zob-product-radius: 1rem;
}

.zob-product-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--zob-product-radius);
  border: 1px solid var(--bs-border-color-translucent) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .96)),
        var(--bs-body-bg);
  box-shadow: 0 .35rem 1.1rem rgba(15, 23, 42, .06) !important;
  transition: transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease;
}

.zob-product-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: radial-gradient(circle at 20% 0%, rgba(var(--bs-primary-rgb), .08), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(var(--bs-primary-rgb), .04), transparent 32%);
  opacity: 0;
  transition: opacity .22s ease;
}

.zob-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--bs-primary-rgb), .32) !important;
  box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, .12) !important;
}

.zob-product-card:hover::before {
  opacity: 1;
}

.zob-product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(var(--bs-primary-rgb), .10), transparent 36%),
        var(--bs-tertiary-bg);
}

.zob-product-card-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(
            180deg,
            rgba(0, 0, 0, .04) 0%,
            rgba(0, 0, 0, 0) 42%,
            rgba(0, 0, 0, .18) 100%
        );
  opacity: .85;
  transition: opacity .25s ease;
}

.zob-product-card:hover .zob-product-card-media::after {
  opacity: 1;
}

.zob-product-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease,
        filter .45s ease;
}

.zob-product-card:hover .zob-product-card-img {
  transform: scale(1.055);
  filter: saturate(1.05) contrast(1.02);
}

.zob-product-card-placeholder {
  height: 100%;
  min-height: 13rem;
  color: var(--bs-secondary-color);
}

.zob-product-card-media .badge {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1rem);
  padding: .35rem .65rem;
  line-height: 1.2;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 .45rem 1rem rgba(0, 0, 0, .18);
}

.zob-product-card .card-body {
  position: relative;
  z-index: 2;
  background: transparent;
}

.zob-product-card-terms {
  min-height: 1.55rem;
}

.zob-product-card-terms a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  line-height: 1.25;
  font-size: .75rem;
  font-weight: 500 !important;
  transition: background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.zob-product-card-terms a:hover {
  transform: translateY(-1px);
  box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .16);
}

.zob-product-card .card-title {
  min-height: 3.05rem;
}

.zob-product-card .card-title a {
  display: -webkit-box;
  color: var(--bs-body-color);
  line-height: 1.45;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}

.zob-product-card:hover .card-title a {
  color: var(--bs-primary);
}

.zob-product-card-excerpt {
  display: -webkit-box;
  min-height: 2.55rem;
  color: var(--bs-secondary-color) !important;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zob-product-card-params {
  position: relative;
  padding-top: .9rem !important;
  border-top: 1px dashed var(--bs-border-color) !important;
}

.zob-product-card-params > .d-flex {
  min-height: 1.75rem;
}

.zob-product-card-params span,
.zob-product-card-params time {
  line-height: 1.4;
}

.zob-product-card-params strong {
  max-width: 60%;
  font-weight: 700;
  word-break: break-word;
}

.zob-product-card-params .text-danger {
  color: var(--bs-danger) !important;
}

.zob-product-card-params i {
  opacity: .85;
}

.zob-product-card .btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-weight: 500;
  transition: transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.zob-product-card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 .45rem 1rem rgba(var(--bs-primary-rgb), .18);
}

.zob-product-card .btn i {
  transition: transform .2s ease;
}

.zob-product-card .btn:hover i {
  transform: translateX(2px);
}

.stretched-link-safe::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
}

.zob-product-card .btn,
.zob-product-card a.badge,
.zob-product-card-media,
.zob-product-card-terms a {
  position: relative;
  z-index: 3;
}

[data-bs-theme="dark"] .zob-product-category-filter .zob-product-cat-pill {
  background-color: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .09) !important;
}

[data-bs-theme="dark"] .zob-product-category-filter .zob-product-cat-pill:hover {
  background-color: rgba(var(--bs-primary-rgb), .13);
  border-color: rgba(var(--bs-primary-rgb), .4) !important;
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .zob-product-category-filter .zob-product-cat-pill.is-active {
  box-shadow: 0 .45rem 1.1rem rgba(var(--bs-primary-rgb), .28);
}

[data-bs-theme="dark"] .zob-product-category-filter .zob-product-cat-pill.is-parent-active {
  box-shadow: 0 .25rem .85rem rgba(var(--bs-primary-rgb), .18);
}

[data-bs-theme="dark"] .zob-product-card {
  background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .018)
        );
  border-color: rgba(255, 255, 255, .09) !important;
  box-shadow: 0 .35rem 1.1rem rgba(0, 0, 0, .28) !important;
}

[data-bs-theme="dark"] .zob-product-card::before {
  background: radial-gradient(circle at 20% 0%, rgba(var(--bs-primary-rgb), .16), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(var(--bs-primary-rgb), .08), transparent 32%);
}

[data-bs-theme="dark"] .zob-product-card:hover {
  border-color: rgba(var(--bs-primary-rgb), .45) !important;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .42) !important;
}

[data-bs-theme="dark"] .zob-product-card-media {
  background: radial-gradient(circle at 30% 20%, rgba(var(--bs-primary-rgb), .18), transparent 36%),
        var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .zob-product-card-media::after {
  background: linear-gradient(
            180deg,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, 0) 36%,
            rgba(0, 0, 0, .36) 100%
        );
}

[data-bs-theme="dark"] .zob-product-card-params {
  border-top-color: rgba(255, 255, 255, .12) !important;
}

[data-bs-theme="dark"] .zob-product-card-terms a {
  background-color: rgba(var(--bs-primary-rgb), .14) !important;
}

@media (max-width: 991.98px) {
  .zob-product-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.375rem;
    margin-left: -0.375rem;
  }

  .zob-product-grid > * {
    flex: 0 0 auto;
    width: 50% !important;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    margin-bottom: 0.75rem;
  }

  .zob-product-card .card-body {
    padding: 0.75rem !important;
  }

  .zob-product-card-terms {
    min-height: auto;
    margin-bottom: 0.35rem;
  }

  .zob-product-card-terms a {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }

  .zob-product-card .card-title {
    min-height: 2.3rem;
    margin-bottom: 0.4rem;
  }

  .zob-product-card .card-title a {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .zob-product-card-excerpt {
    display: none !important;
  }

  .zob-product-card-params {
    padding-top: 0.6rem !important;
    font-size: 0.75rem;
  }

  .zob-product-card-params > .d-flex {
    min-height: auto;
    margin-bottom: 0.25rem;
  }

  .zob-product-card-placeholder {
    min-height: 8rem;
  }

  .zob-product-card .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    width: 100%;
    justify-content: center;
    margin-top: 0.25rem;
  }

  .zob-product-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zob-product-category-filter .zob-product-cat-pill,
    .zob-product-card,
    .zob-product-card::before,
    .zob-product-card-media::after,
    .zob-product-card-img,
    .zob-product-card .btn,
    .zob-product-card .btn i,
    .zob-product-card-terms a {
    transition: none;
  }

  .zob-product-category-filter .zob-product-cat-pill:hover,
    .zob-product-card:hover,
    .zob-product-card:hover .zob-product-card-img,
    .zob-product-card .btn:hover,
    .zob-product-card .btn:hover i,
    .zob-product-card-terms a:hover {
    transform: none;
  }
}

/* ============================== 模块 18 结束：产品归档 / 产品分类 / 产品卡片 ============================== */

/* ================================================================================
   模块 19：产品内容页 / 产品询价弹窗
   --------------------------------------------------------------------------------
   功能范围：控制单个产品详情页布局、产品图片、产品信息、询价按钮、弹窗表单、产品内容区、库存价格信息和移动端显示。
   主要包含：`.zob-product-single-*`、产品详情媒体区、产品信息卡、询价 Modal、询价表单字段、产品内容正文。
   维护建议：优化产品详情页转化按钮、询价弹窗、产品图片比例、详情参数卡、移动端产品信息顺序时集中改本模块。
   注意事项：询价弹窗依赖 Bootstrap Modal 与 AJAX 表单；CSS 只负责样式，提交逻辑需检查 PHP/JS。
   模块边界：从此处开始，到“模块 19 结束：产品内容页 / 产品询价弹窗”为止。
   ================================================================================ */

.single-product .zob-product-single-article {
  position: relative;
}

.single-product .zob-product-single-article .zob-article-header {
  border-color: color-mix(in srgb, var(--border) 72%, transparent) !important;
}

.single-product .zob-product-single-article .zob-article-header > .d-flex:first-child {
  color: var(--muted);
}

.single-product .zob-product-single-article .zob-article-header > .d-flex:first-child .badge {
  font-weight: 500;
  letter-spacing: .01em;
}

.single-product .zob-product-brief {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 8%, transparent),
      transparent 38%
    ),
    var(--surface-soft, var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 .35rem .9rem rgba(15, 23, 42, .035);
}

.single-product .zob-product-brief::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary);
  opacity: .75;
}

.single-product .zob-product-brief .row {
  position: relative;
  z-index: 1;
}

.single-product .zob-product-brief-item {
  min-width: 0;
  height: 100%;
}

.single-product .zob-product-brief-item .small {
  color: var(--muted) !important;
  line-height: 1.35;
}

.single-product .zob-product-brief-value {
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.single-product .zob-product-price {
  color: var(--danger, var(--bs-danger));
}

.single-product .zob-product-brief .badge {
  font-weight: 500;
  padding: .38rem .62rem;
}

.single-product .zob-product-inquiry-actions {
  position: relative;
  z-index: 1;
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.single-product .zob-product-inquiry-actions .btn {
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.single-product .zob-product-inquiry-actions .btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.single-product .zob-product-inquiry-actions .btn:active {
  transform: translateY(0);
}

.single-product .zob-product-inquiry-actions .btn-primary {
  box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--primary) 20%, transparent);
}

.single-product .zob-product-inquiry-actions .btn-primary:hover {
  box-shadow: 0 .5rem 1rem color-mix(in srgb, var(--primary) 26%, transparent);
}

.single-product .zob-product-gallery-section {
  margin-top: 1rem;
}

.single-product .zob-product-gallery {
  position: relative;
  overflow: hidden;
  border-color: var(--border) !important;
  background: radial-gradient(
      circle at center,
      color-mix(in srgb, var(--primary) 8%, transparent),
      transparent 44%
    ),
    var(--surface);
}

.single-product .zob-product-gallery-img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  background-color: var(--surface);
}

.single-product .zob-product-gallery .carousel-control-prev,
.single-product .zob-product-gallery .carousel-control-next {
  width: 12%;
  opacity: .86;
  transition: opacity .16s ease;
}

.single-product .zob-product-gallery .carousel-control-prev:hover,
.single-product .zob-product-gallery .carousel-control-next:hover {
  opacity: 1;
}

.single-product .zob-product-gallery .carousel-control-prev-icon,
.single-product .zob-product-gallery .carousel-control-next-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: .75rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, .42);
  background-size: 55%;
  box-shadow: 0 .35rem .8rem rgba(0, 0, 0, .22);
}

.single-product .zob-product-feature-section {
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.single-product .zob-product-feature-section h2 {
  color: var(--text);
}

.single-product .zob-product-feature-list {
  line-height: 1.75;
}

.single-product .zob-product-feature-list li {
  color: var(--text);
}

.single-product .zob-product-feature-list li:last-child {
  margin-bottom: 0 !important;
}

.single-product .zob-product-feature-list .bi {
  margin-top: .18rem;
}

.single-product .zob-product-single-article .zob-article-content {
  color: var(--text);
}

.single-product .zob-product-single-article .zob-article-content > *:first-child {
  margin-top: 0;
}

.single-product .zob-product-single-article .article-tags {
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.single-product .zob-product-single-article .article-tags h2 {
  color: var(--text);
}

.single-product .zob-product-single-article .zob-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background-color: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%);
  color: var(--primary);
  font-weight: 500;
  transition: color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.single-product .zob-product-single-article .zob-tag-pill:hover {
  color: var(--primary-contrast, #fff);
  background-color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  text-decoration: none;
}

.single-product .zob-product-single-article .article-copyright {
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.single-product .zob-product-single-article .zob-copyright {
  color: var(--muted);
}

.single-product .zob-product-single-article .zob-permalink {
  word-break: break-all;
}

.zob-product-inquiry-modal .modal-dialog {
  max-width: min(860px, calc(100vw - 1.5rem));
}

.zob-product-inquiry-modal .modal-content {
  color: var(--text, var(--bs-body-color));
  background: var(--surface-soft, var(--bs-body-bg));
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}

.zob-product-inquiry-modal .modal-header {
  border-color: var(--border) !important;
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 9%, transparent),
      transparent 42%
    ),
    transparent;
}

.zob-product-inquiry-modal .modal-body {
  background: var(--surface-soft, var(--bs-body-bg));
}

.zob-product-inquiry-modal .modal-title {
  color: var(--text);
}

.zob-product-inquiry-modal .btn-close {
  box-shadow: none !important;
}

.zob-product-inquiry-modal .zob-product-inquiry-summary {
  border: 1px solid var(--border) !important;
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 7%, transparent),
      transparent 38%
    ),
    var(--surface, var(--bs-tertiary-bg)) !important;
}

.zob-product-inquiry-modal .zob-product-inquiry-summary .fw-semibold {
  color: var(--text);
}

.zob-product-inquiry-modal .zob-product-inquiry-summary .text-danger {
  color: var(--danger, var(--bs-danger)) !important;
}

.zob-product-inquiry-modal .zob-contact-form {
  margin: 0;
}

.zob-product-inquiry-modal .zob-contact-form .row,
.zob-product-inquiry-modal .zob-contact-form [class*="col-"] {
  min-width: 0;
}

.zob-product-inquiry-modal .zob-contact-form .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.zob-product-inquiry-modal .zob-contact-form .input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--primary), transparent 85%);
}

.zob-product-inquiry-modal .zob-contact-form .zob-custom-addon {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  flex: 0 0 110px !important;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface) 95%, #000 5%) !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.zob-product-inquiry-modal .zob-contact-form .input-group:focus-within .zob-custom-addon {
  color: var(--primary) !important;
  background: var(--surface) !important;
  border-right-color: var(--primary) !important;
}

.zob-product-inquiry-modal .zob-contact-form .zob-custom-addon .addon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zob-product-inquiry-modal .zob-contact-form .zob-interactive-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: .6rem .75rem !important;
  box-shadow: none !important;
}

.zob-product-inquiry-modal .zob-contact-form .zob-interactive-input:focus {
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  caret-color: var(--primary);
}

.zob-product-inquiry-modal .zob-contact-form .zob-interactive-input::placeholder {
  color: var(--muted) !important;
  opacity: .72 !important;
}

.zob-product-inquiry-modal .zob-contact-editor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.zob-product-inquiry-modal .zob-contact-editor-card .card-body {
  background: transparent;
}

.zob-product-inquiry-modal .zob-contact-editor-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--primary), transparent 85%);
}

.zob-product-inquiry-modal .zob-contact-textarea {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: .75rem !important;
  box-shadow: none !important;
}

.zob-product-inquiry-modal .zob-contact-textarea:focus {
  color: var(--text) !important;
  background: transparent !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  caret-color: var(--primary);
}

.zob-product-inquiry-modal .zob-contact-textarea::placeholder {
  color: var(--muted) !important;
  opacity: .72;
}

.zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill,
.zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill:hover,
.zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill:focus,
.zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill,
.zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill:hover,
.zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  border-color: transparent !important;
  transition: background-color 9999s ease-in-out 0s;
}

.zob-product-inquiry-modal .btn {
  font-weight: 600;
}

.zob-product-inquiry-modal .btn-primary {
  box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--primary) 20%, transparent);
}

.zob-product-inquiry-modal .btn-primary:hover {
  box-shadow: 0 .5rem 1rem color-mix(in srgb, var(--primary) 26%, transparent);
}

.zob-product-inquiry-modal .zob-contact-response {
  font-size: .9375rem;
  line-height: 1.6;
}

.zob-product-inquiry-modal .zob-contact-response:empty {
  display: none;
}

[data-bs-theme="dark"] .single-product .zob-product-brief {
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 12%, transparent),
      transparent 40%
    ),
    color-mix(in srgb, var(--surface) 88%, #fff 12%);
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
    0 .45rem 1rem rgba(0, 0, 0, .22);
}

[data-bs-theme="dark"] .single-product .zob-product-gallery {
  background: radial-gradient(
      circle at center,
      color-mix(in srgb, var(--primary) 12%, transparent),
      transparent 44%
    ),
    var(--surface);
  border-color: var(--border) !important;
}

[data-bs-theme="dark"] .single-product .zob-product-single-article .zob-tag-pill {
  background-color: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  color: color-mix(in srgb, #fff 88%, var(--primary) 12%);
}

[data-bs-theme="dark"] .single-product .zob-product-single-article .zob-tag-pill:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .modal-content,
[data-bs-theme="dark"] .zob-product-inquiry-modal .modal-body {
  color: var(--text);
  background: var(--surface-soft, var(--surface));
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .modal-content {
  border-color: var(--border);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .65);
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .modal-header {
  border-color: var(--border) !important;
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 14%, transparent),
      transparent 42%
    ),
    transparent;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-product-inquiry-summary {
  background: radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--primary) 10%, transparent),
      transparent 40%
    ),
    color-mix(in srgb, var(--surface) 86%, #fff 14%) !important;
  border-color: var(--border) !important;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .input-group,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-editor-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .zob-custom-addon {
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface) 85%, #fff 15%) !important;
  border-right-color: var(--border) !important;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .input-group:focus-within .zob-custom-addon {
  color: var(--primary) !important;
  background: var(--surface) !important;
  border-right-color: var(--primary) !important;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .zob-interactive-input,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-textarea {
  color: var(--text) !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .zob-interactive-input:focus,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-textarea:focus {
  color: var(--text) !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form .zob-interactive-input::placeholder,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-textarea::placeholder {
  color: var(--muted) !important;
  opacity: .7;
}

[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill:hover,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form input:-webkit-autofill:focus,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill:hover,
[data-bs-theme="dark"] .zob-product-inquiry-modal .zob-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
}

.zob-product-inquiry-modal .btn:focus-visible,
.zob-product-inquiry-modal .zob-contact-form .zob-interactive-input:focus-visible,
.zob-product-inquiry-modal .zob-contact-textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .single-product .zob-product-gallery-img {
    max-height: 320px;
  }

  .single-product .zob-product-inquiry-actions .btn {
    width: 100%;
  }

  .zob-product-inquiry-modal .modal-dialog {
    margin: .75rem;
  }

  .zob-product-inquiry-modal .modal-body {
    padding: 1rem !important;
  }

  .zob-product-inquiry-modal .zob-contact-form .input-group {
    flex-wrap: nowrap !important;
  }

  .zob-product-inquiry-modal .zob-contact-form .zob-custom-addon {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    padding-left: .45rem;
    padding-right: .45rem;
    font-size: .8125rem;
  }

  .zob-product-inquiry-modal .zob-contact-form .zob-interactive-input {
    min-width: 0 !important;
  }

  .zob-product-inquiry-modal .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .single-product .zob-product-brief {
    padding: 1rem !important;
  }

  .single-product .zob-product-gallery-img {
    max-height: 280px;
  }

  .zob-product-inquiry-modal .modal-title {
    font-size: 1rem;
  }

  .zob-product-inquiry-modal .zob-product-inquiry-summary {
    padding: .85rem !important;
  }

  .zob-product-inquiry-modal .zob-contact-form .zob-custom-addon {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    flex-basis: 84px !important;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-product .zob-product-inquiry-actions .btn,
  .single-product .zob-product-single-article .zob-tag-pill,
  .zob-product-inquiry-modal .zob-contact-form .input-group,
  .zob-product-inquiry-modal .zob-contact-form .zob-custom-addon,
  .zob-product-inquiry-modal .zob-contact-form .zob-interactive-input,
  .zob-product-inquiry-modal .zob-contact-editor-card,
  .zob-product-inquiry-modal .zob-contact-textarea {
    transition: none !important;
  }

  .single-product .zob-product-inquiry-actions .btn:hover,
  .single-product .zob-product-single-article .zob-tag-pill:hover {
    transform: none;
  }
}

/* ============================== 模块 19 结束：产品内容页 / 产品询价弹窗 ============================== */

/* ================================================================================
   模块 20：404 页面
   --------------------------------------------------------------------------------
   功能范围：控制 404 页面错误提示、图标、搜索框、返回按钮、推荐入口和空状态视觉。
   主要包含：`.zob-404-*` 或 404 模板中的空状态、按钮、搜索组件。
   维护建议：优化 404 页面视觉、引导按钮、搜索框、暗色模式对比度时集中改本模块。
   注意事项：404 页面通常没有正文内容，样式应保持轻量，并确保移动端不出现过大留白。
   模块边界：从此处开始，到“模块 20 结束：404 页面”为止。
   ================================================================================ */

.zob-404-card {
  border-radius: var(--radius-lg, 1rem);
  overflow: hidden;
}

.zob-404-hero {
  position: relative;
  padding: 3rem 1.5rem 2.5rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, rgba(148, 163, 184, .55));
  background: radial-gradient(circle at 0% 0%,
			color-mix(in srgb, var(--primary, #0d6efd) 20%, transparent) 0,
			transparent 60%),
		radial-gradient(circle at 100% 0%,
			color-mix(in srgb, #f97316 16%, transparent) 0,
			transparent 55%),
		var(--surface-soft, #ffffff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

[data-bs-theme="dark"] .zob-404-hero {
  background: radial-gradient(circle at 0% 0%,
			color-mix(in srgb, var(--primary, #60a5fa) 24%, transparent) 0,
			transparent 60%),
		radial-gradient(circle at 100% 0%,
			color-mix(in srgb, #fb923c 20%, transparent) 0,
			transparent 55%),
		color-mix(in srgb, #020617 90%, #020617 10%);
  border-color: rgba(148, 163, 184, .5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .85);
}

.zob-404-hero::after {
  content: "";
  position: absolute;
  inset-inline: -20%;
  bottom: -40px;
  height: 80px;
  background: radial-gradient(circle at 50% 0,
				rgba(255, 255, 255, 0.6),
				transparent 70%);
  opacity: .35;
  pointer-events: none;
}

[data-bs-theme="dark"] .zob-404-hero::after {
  opacity: .18;
  background: radial-gradient(circle at 50% 0,
				rgba(148, 163, 184, 0.45),
				transparent 70%);
}

.zob-404-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%,
			rgba(255, 255, 255, .9),
			transparent 60%),
		color-mix(in srgb, var(--primary, #0d6efd) 60%, #fb923c 40%);
  color: #ffffff;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  animation: zob404Float 3.3s ease-in-out infinite;
}

[data-bs-theme="dark"] .zob-404-icon-circle {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
}

.zob-404-code {
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
  background: linear-gradient(120deg,
				#e5e7eb,
				#ffffff,
				color-mix(in srgb, var(--primary, #0d6efd) 80%, #fb923c 20%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 25px rgba(15, 23, 42, 0.45),
		0 0 50px rgba(59, 130, 246, 0.55);
}

[data-bs-theme="dark"] .zob-404-code {
  text-shadow: 0 0 30px rgba(15, 23, 42, 0.9),
		0 0 55px rgba(59, 130, 246, 0.8);
}

.zob-404-title {
  color: var(--bs-emphasis-color, #111827);
}

.zob-404-subtitle {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted, var(--bs-secondary-color, #6b7280));
}

.zob-404-actions .zob-404-home-btn {
  border-radius: 999px;
  padding-block: .55rem;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.36);
  font-weight: 600;
}

.zob-404-actions .zob-404-home-btn i {
  font-size: 1.05rem;
}

.search-again-form {
  max-width: 520px;
  width: 100%;
}

.search-again-form .form-control {
  border-radius: .75rem;
  transition: all .28s ease;
  border-color: color-mix(in srgb,
					var(--border, #e5e7eb) 75%,
					var(--primary, #0d6efd) 25%);
  background-color: var(--surface-soft, #ffffff);
}

.search-again-form .form-control:focus {
  box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.26);
  border-color: var(--primary, #0d6efd);
}

.search-again-form .btn-outline-light {
  border-radius: 999px;
  white-space: nowrap;
  border-color: rgba(255, 255, 255, .75);
  background: linear-gradient(120deg,
				rgba(255, 255, 255, .98),
				rgba(248, 250, 252, .95));
  color: var(--primary, #0d6efd);
  font-weight: 500;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.search-again-form .btn-outline-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .25);
}

[data-bs-theme="dark"] .search-again-form .form-control {
  background-color: rgba(15, 23, 42, .9);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, .55);
}

[data-bs-theme="dark"] .search-again-form .form-control::placeholder {
  color: rgba(148, 163, 184, .75);
}

[data-bs-theme="dark"] .search-again-form .btn-outline-light {
  background: linear-gradient(120deg,
				rgba(248, 250, 252, .98),
				rgba(226, 232, 240, .96));
  color: #1f2933;
}

.zob-404-recent .article-list .article-item {
  border-radius: var(--radius-lg, .9rem);
}

@keyframes zob404Float {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 575.98px) {
  .zob-404-hero {
    padding: 2.4rem 1.15rem 2.1rem;
  }

  .zob-404-code {
    letter-spacing: 0.06em;
  }
}

/* ============================== 模块 20 结束：404 页面 ============================== */

/* ================================================================================
   模块 21：作者归档页
   --------------------------------------------------------------------------------
   功能范围：控制作者归档页头部资料卡、头像、作者介绍、文章数量、注册时间、作者链接和归档列表前的展示区。
   主要包含：`.zob-author-archive-*`、作者头像、作者徽章、作者统计、作者描述和相关按钮。
   维护建议：优化作者档案页排版、作者信息卡、统计徽标、移动端堆叠布局时集中改本模块。
   注意事项：作者页会和通用文章列表模块联动；本模块只负责作者头部区域，文章列表仍看模块 06。
   模块边界：从此处开始，到“模块 21 结束：作者归档页”为止。
   ================================================================================ */

.zob-author-archive-head {
  border-radius: var(--radius-lg, 1rem);
  background-color: var(--surface-soft, #fff);
  border: 1px solid var(--border, #e5e7eb);
}

.zob-author-archive-label {
  margin-top: .25rem;
}

.zob-author-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding-block: .28rem;
  padding-inline: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: .8rem;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
}

[data-bs-theme="light"] .zob-author-badge {
  background-color: color-mix(in srgb,
		var(--primary, var(--bs-primary)) 88%,
		#ffffff 12%
	);
  border-color: color-mix(in srgb,
		var(--primary, var(--bs-primary)) 92%,
		#000000 8%
	);
  color: var(--primary-contrast, #ffffff);
  box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.15);
}

[data-bs-theme="dark"] .zob-author-badge {
  background-color: color-mix(in srgb,
		var(--primary, var(--bs-primary)) 35%,
		#020617 65%
	);
  border-color: color-mix(in srgb,
		var(--primary, var(--bs-primary)) 70%,
		transparent
	);
  color: #f9fafb;
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.85);
}

.zob-author-badge .bi {
  font-size: .9em;
}

[data-bs-theme="dark"] .zob-author-archive-head {
  border-color: var(--border, #1f2937);
  background-color: var(--surface-soft, #020617);
  box-shadow: 0 18px 40px rgba(0,0,0,.85);
}

.zob-author-social-btn {
  background-color: var(--surface-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--bs-body-color, #374151);
  transition: all 0.2s ease-in-out;
}

.zob-author-social-btn:hover {
  background-color: color-mix(in srgb, var(--surface-soft, #f9fafb) 90%, #000 10%);
  color: var(--bs-body-color, #111827);
}

[data-bs-theme="dark"] .zob-author-social-btn {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border, #374151);
  color: #d1d5db;
}

[data-bs-theme="dark"] .zob-author-social-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}

/* ============================== 模块 21 结束：作者归档页 ============================== */

/* ================================================================================
   模块 22：图片附件页
   --------------------------------------------------------------------------------
   功能范围：控制 WordPress 图片附件页的图片展示、图片信息、说明文字、导航按钮和媒体详情布局。
   主要包含：附件页图片容器、图片标题、图片说明、上一张/下一张导航、媒体元信息。
   维护建议：优化图片附件页图片最大宽度、居中、说明文字、移动端显示时集中改本模块。
   注意事项：附件页和正文图片样式不同；不要把附件页规则合并到 `.zob-article-content img`，避免影响文章正文。
   模块边界：从此处开始，到“模块 22 结束：图片附件页”为止。
   ================================================================================ */

.zob-image-attachment-card {
  border-radius: var(--radius-lg, 1rem);
  background-color: var(--surface-soft, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  padding: 1.25rem 1.5rem;
  transition: background-color var(--transition-med, .25s) ease,
	border-color var(--transition-med, .25s) ease,
	box-shadow .2s ease,
	transform .16s ease;
}

.zob-image-attachment-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .zob-image-attachment-card {
  background-color: var(--surface-soft, #020617);
  border-color: var(--border, #1f2937);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .9);
}

.zob-image-attachment-header h1 {
  font-size: 1.4rem;
}

.zob-image-attachment-meta {
  font-size: .85rem;
  color: var(--muted, var(--bs-secondary-color));
}

.zob-image-attachment-media {
  border-radius: calc(var(--radius-lg, 1rem) - .25rem);
  overflow: hidden;
  background: radial-gradient(circle at top,
	  rgba(148, 163, 184, .18),
	  transparent 45%);
}

.zob-image-attachment-media .zob-image-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
}

.zob-image-attachment-media img {
  max-height: 75vh;
  width: auto;
  max-width: 100%;
  border-radius: .9rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .25);
  transition: transform .35s ease, box-shadow .35s ease;
}

.zob-image-attachment-media img:hover {
  transform: scale(1.01);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
}

.zob-image-caption {
  font-size: .9rem;
  color: var(--muted, var(--bs-secondary-color));
}

.zob-image-info-list {
  font-size: .85rem;
}

.zob-image-info-list .badge {
  font-weight: 500;
}

.zob-image-nav .btn {
  border-radius: 999px;
}

.zob-image-nav small {
  font-size: .75rem;
}

@media (max-width: 576px) {
  .zob-image-attachment-card {
    padding: 1rem 1.05rem;
  }

  .zob-image-attachment-header h1 {
    font-size: 1.15rem;
  }
}

/* ============================== 模块 22 结束：图片附件页 ============================== */

/* ================================================================================
   模块 23：侧边栏小工具集合
   --------------------------------------------------------------------------------
   功能范围：控制侧边栏内多个 Widget 的统一卡片风格、标题、列表、图标、链接、标签、统计、搜索或推荐内容展示。
   主要包含：`.widget`、`.sidebar-widget`、`.zob-*widget*`、侧栏列表、标签云、统计项、推荐文章等小工具选择器。
   维护建议：优化侧边栏各类小工具统一视觉、间距、边框、标题样式、夜间模式时集中改本模块。
   注意事项：本模块可能覆盖多个小工具，新增独立小工具时建议使用专属前缀，避免影响已有 Widget。
   模块边界：从此处开始，到“模块 23 结束：侧边栏小工具集合”为止。
   ================================================================================ */

/* ================================================================================
   侧边栏小工具：年度月度归档
   --------------------------------------------------------------------------------
   功能范围：
   1）控制归档小工具的整体面板、标题栏、年份徽章、全部归档按钮、年份导航、
      月份卡片、月份编号、文章数量、当前月份高亮、空状态和明暗模式。
   2）适配新版 HTML 结构：
      - .zob-archives-panel
      - .zob-archives-panel__head
      - .zob-archives-panel__icon
      - .zob-archives-panel__title
      - .zob-archives-panel__actions
      - .zob-archives-panel__badge
      - .zob-archives-panel__action
      - .zob-archives-panel__nav
      - .zob-archives-panel__nav-link
      - .zob-archives-panel__list
      - .zob-archive-card
      - .zob-archive-card__month
      - .zob-archive-card__main
      - .zob-archive-card__title
      - .zob-archive-card__count
      - .zob-archive-card__arrow
      - .zob-archives-empty
   3）设计目标：
      - 与统计、最新评论、友情链接、热门文章小工具保持统一 ZOB 卡片风格。
      - 不再依赖 Bootstrap list-group / d-flex 控制核心布局。
      - 年份按钮、数量徽章、月份名称在窄屏不挤压。
      - 当前月份高亮更清晰。
      - 支持白天 / 黑夜模式。
   ================================================================================ */


/* ========== 归档面板外层 ========== */

.zob-archives-panel {
  width: 100%;
  min-width: 0;

  padding: .25rem 0 1rem;

  color: var(--text, var(--bs-body-color));

  transition:
    color var(--transition-med, .25s) ease,
    background-color var(--transition-med, .25s) ease;
}


/* ========== 顶部标题栏 ========== */

.zob-archives-panel__head {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;

  min-width: 0;

  padding: .2rem 0 .9rem;
  margin: 0 0 .85rem;

  border-bottom: 1px solid var(--border, var(--bs-border-color));
}

.zob-archives-panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 3.5rem;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--primary, var(--bs-primary)),
    color-mix(in srgb, var(--primary, var(--bs-primary)) 25%, transparent)
  );
}

.zob-archives-panel__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 12%,
    transparent
  );

  border: 1px solid color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  line-height: 1;
}

.zob-archives-panel__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

.zob-archives-panel__title {
  margin: 0;

  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-archives-panel__icon {
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 35%,
    transparent
  );
}


/* ========== 标题栏右侧操作区 ========== */

.zob-archives-panel__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35rem;

  min-width: 0;
}

.zob-archives-panel__badge,
.zob-archives-panel__action,
.zob-archives-panel__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.55rem;

  border-radius: 999px;
  border: 1px solid var(--border, var(--bs-border-color));

  font-size: .72rem;
  font-weight: 650;
  line-height: 1.2;

  white-space: nowrap;

  transition:
    transform .16s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.zob-archives-panel__badge {
  padding: .22rem .55rem;

  color: var(--primary, var(--bs-primary));
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 10%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 28%,
    transparent
  );
}

.zob-archives-panel__action {
  gap: .22rem;

  padding: .22rem .55rem;

  color: var(--text, var(--bs-body-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));

  text-decoration: none;
}

.zob-archives-panel__action:hover {
  color: var(--primary, var(--bs-primary));
  text-decoration: none;

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 10%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 32%,
    transparent
  );
}

.zob-archives-panel__nav {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.zob-archives-panel__nav-link {
  width: 1.55rem;
  padding: 0;

  color: var(--muted, var(--bs-secondary-color));
  background-color: transparent;

  text-decoration: none;
}

.zob-archives-panel__nav-link:hover {
  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 10%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 32%,
    transparent
  );

  text-decoration: none;
}

[data-bs-theme="dark"] .zob-archives-panel__badge,
[data-bs-theme="dark"] .zob-archives-panel__action,
[data-bs-theme="dark"] .zob-archives-panel__nav-link {
  border-color: var(--border, rgba(255,255,255,.1));
}


/* ========== 归档列表 ========== */

.zob-archives-panel__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;

  width: 100%;
  min-width: 0;
}


/* ========== 单条月份归档卡片 ========== */

.zob-archive-card {
  position: relative;

  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding: .78rem .82rem;

  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, var(--bs-border-color));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 96%, #fff 4%),
      var(--surface-soft, var(--bs-tertiary-bg))
    );

  color: var(--text, var(--bs-body-color));

  box-shadow: 0 .4rem 1rem rgba(15, 23, 42, .052);

  text-decoration: none;

  transition:
    transform .18s ease,
    background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow var(--transition-med, .25s) ease,
    color var(--transition-med, .25s) ease;
}

.zob-archive-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background: var(--primary, var(--bs-primary));
  opacity: .32;

  pointer-events: none;
}

.zob-archive-card,
.zob-archive-card:hover,
.zob-archive-card:focus {
  color: var(--text, var(--bs-body-color));
  text-decoration: none;
}

[data-bs-theme="dark"] .zob-archive-card {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 90%, #fff 4%),
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 86%, #000 14%)
    );

  border-color: var(--border, rgba(255,255,255,.1));

  box-shadow: 0 .75rem 1.45rem rgba(0, 0, 0, .38);
}


/* ========== 月份编号 ========== */

.zob-archive-card__month {
  width: 2.45rem;
  height: 2.45rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .9rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

[data-bs-theme="dark"] .zob-archive-card__month {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}


/* ========== 月份文字 ========== */

.zob-archive-card__main {
  min-width: 0;
}

.zob-archive-card__title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  min-width: 0;
  max-width: 100%;

  color: var(--bs-emphasis-color);

  font-size: .88rem;
  font-weight: 650;
  line-height: 1.35;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zob-archive-card__title .bi {
  flex: 0 0 auto;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .86rem;
  opacity: .85;
}


/* ========== 文章数量 ========== */

.zob-archive-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2rem;
  max-width: 4.5rem;

  padding: .2rem .55rem;

  border-radius: 999px;

  color: var(--primary, var(--bs-primary));
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 14%,
    transparent
  );

  font-size: .72rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ========== 外链箭头 ========== */

.zob-archive-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.45rem;
  height: 1.45rem;

  border-radius: 999px;

  color: var(--muted, var(--bs-secondary-color));

  background-color: color-mix(
    in srgb,
    var(--surface-soft, var(--bs-tertiary-bg)) 86%,
    var(--primary, var(--bs-primary)) 14%
  );

  font-size: .78rem;
  line-height: 1;

  opacity: .82;

  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}


/* ========== 当前月份高亮 ========== */

.zob-archive-card--current {
  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 58%,
    var(--border, var(--bs-border-color)) 42%
  );

  box-shadow:
    0 .45rem 1.1rem rgba(15, 23, 42, .08),
    0 0 0 1px color-mix(in srgb, var(--primary, var(--bs-primary)) 24%, transparent);
}

.zob-archive-card--current::before {
  opacity: .82;
}

.zob-archive-card--current .zob-archive-card__month {
  color: #fff;
  background-color: var(--primary, var(--bs-primary));
  border-color: var(--primary, var(--bs-primary));
}

.zob-archive-card--current .zob-archive-card__count {
  color: #fff;
  background-color: var(--primary, var(--bs-primary));
}


/* ========== Hover / Focus ========== */

@media (hover: hover) and (pointer: fine) {
  .zob-archive-card:hover {
    transform: translateY(-2px);

    border-color: color-mix(
      in srgb,
      var(--border, var(--bs-border-color)) 55%,
      var(--primary, var(--bs-primary)) 45%
    );

    box-shadow: 0 .75rem 1.45rem rgba(15, 23, 42, .1);
  }

  .zob-archive-card:hover .zob-archive-card__month {
    transform: scale(1.04);

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 16%,
      transparent
    );

    border-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 42%,
      transparent
    );
  }

  .zob-archive-card--current:hover .zob-archive-card__month {
    color: #fff;
    background-color: var(--primary, var(--bs-primary));
    border-color: var(--primary, var(--bs-primary));
  }

  .zob-archive-card:hover .zob-archive-card__title {
    color: var(--primary, var(--bs-primary));
  }

  .zob-archive-card:hover .zob-archive-card__arrow {
    transform: translate(2px, -2px);

    color: var(--primary, var(--bs-primary));

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 14%,
      transparent
    );

    opacity: 1;
  }

  [data-bs-theme="dark"] .zob-archive-card:hover {
    box-shadow: 0 .95rem 1.85rem rgba(0, 0, 0, .52);
  }
}

.zob-archive-card:focus-visible,
.zob-archives-panel__action:focus-visible,
.zob-archives-panel__nav-link:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 空状态 ========== */

.zob-archives-empty {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .85rem .9rem;

  border: 1px dashed var(--border, var(--bs-border-color));
  border-radius: var(--radius-lg, 1rem);

  color: var(--muted, var(--bs-secondary-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));

  font-size: .86rem;
  line-height: 1.4;
}

.zob-archives-empty i {
  color: var(--primary, var(--bs-primary));
}


/* ========== Pad / 中等屏优化 ========== */

@media (min-width: 576px) and (max-width: 1024px) {
  .zob-archives-panel__head {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .zob-archives-panel__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .zob-archives-panel__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .82rem;
  }

  .zob-archive-card {
    grid-template-columns: 2.3rem minmax(0, 1fr) auto auto;
    gap: .62rem;

    padding: .76rem .78rem;
  }

  .zob-archive-card__month {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .82rem;
  }

  .zob-archive-card__title {
    font-size: .86rem;
  }

  .zob-archive-card__count {
    font-size: .7rem;
  }
}


/* ========== 手机端优化 ========== */

@media (max-width: 575.98px) {
  .zob-archives-panel {
    padding-top: .75rem;
    padding-bottom: .9rem;
  }

  .zob-archives-panel__head {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: .6rem;

    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }

  .zob-archives-panel__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: .35rem;
  }

  .zob-archives-panel__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .75rem;
  }

  .zob-archives-panel__title {
    font-size: 1rem;
  }

  .zob-archives-panel__badge,
  .zob-archives-panel__action,
  .zob-archives-panel__nav-link {
    min-height: 1.5rem;
    font-size: .68rem;
  }

  .zob-archive-card {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    gap: .58rem;

    padding: .72rem .72rem;

    border-radius: .9rem;
  }

  .zob-archive-card__month {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .76rem;
  }

  .zob-archive-card__title {
    font-size: .84rem;
  }

  .zob-archive-card__count {
    max-width: 3.6rem;
    padding-inline: .45rem;
    font-size: .68rem;
  }

  .zob-archive-card__arrow {
    display: none;
  }
}


/* ========== 极窄屏兜底 ========== */

@media (max-width: 380px) {
  .zob-archive-card {
    grid-template-columns: 1.95rem minmax(0, 1fr) auto;
    gap: .52rem;
  }

  .zob-archive-card__month {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .7rem;
  }

  .zob-archive-card__title {
    white-space: normal;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


/* ========== 减少动效模式 ========== */

@media (prefers-reduced-motion: reduce) {
  .zob-archives-panel,
  .zob-archives-panel *,
  .zob-archives-panel *::before,
  .zob-archives-panel *::after {
    transition: none !important;
  }

  .zob-archive-card:hover,
  .zob-archive-card:hover .zob-archive-card__month,
  .zob-archive-card:hover .zob-archive-card__arrow,
  .zob-archives-panel__action:hover,
  .zob-archives-panel__nav-link:hover {
    transform: none !important;
  }
}

/* ================================================================================
   侧边栏小工具：最新评论
   --------------------------------------------------------------------------------
   功能范围：
   1）控制最新评论小工具的整体面板、标题栏、评论卡片、头像、评论标题、
      评论摘要、时间、评论数量和明暗模式。
   2）适配新版 HTML 结构：
      - .zob-comments-panel
      - .zob-comments-panel__head
      - .zob-comments-panel__icon
      - .zob-comments-panel__title
      - .zob-comments-panel__list
      - .zob-comment-card
      - .zob-comment-card__link
      - .zob-comment-card__avatar
      - .zob-comment-card__avatar-img
      - .zob-comment-card__main
      - .zob-comment-card__top
      - .zob-comment-card__title
      - .zob-comment-card__time
      - .zob-comment-card__excerpt
      - .zob-comment-card__meta
      - .zob-comments-empty
   3）设计目标：
      - 与网站统计模块的 ZOB 卡片风格统一。
      - 不再依赖 Bootstrap list-group / d-flex 控制核心布局。
      - 头像、标题、摘要、时间不互相挤压。
      - PC / Pad / 手机端稳定。
      - 支持白天 / 黑夜模式。
   ================================================================================ */


/* ========== 评论面板外层 ========== */

.zob-comments-panel {
  width: 100%;
  min-width: 0;

  padding: .25rem 0 1rem;

  color: var(--text, var(--bs-body-color));

  transition:
    color var(--transition-med, .25s) ease,
    background-color var(--transition-med, .25s) ease;
}


/* ========== 顶部标题栏：与统计模块统一 ========== */

.zob-comments-panel__head {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;

  min-width: 0;

  padding: .2rem 0 .9rem;
  margin: 0 0 .85rem;

  border-bottom: 1px solid var(--border, var(--bs-border-color));
}

.zob-comments-panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 3.5rem;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--primary, var(--bs-primary)),
    color-mix(in srgb, var(--primary, var(--bs-primary)) 25%, transparent)
  );
}

.zob-comments-panel__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 12%,
    transparent
  );

  border: 1px solid color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  line-height: 1;
}

.zob-comments-panel__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

.zob-comments-panel__title {
  margin: 0;

  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-comments-panel__icon {
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 35%,
    transparent
  );
}


/* ========== 评论列表 ========== */

.zob-comments-panel__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;

  width: 100%;
  min-width: 0;
}


/* ========== 单条评论卡片 ========== */

.zob-comment-card {
  min-width: 0;
}

.zob-comment-card__link {
  position: relative;

  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  align-items: flex-start;
  gap: .78rem;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding: .88rem .92rem;

  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, var(--bs-border-color));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 96%, #fff 4%),
      var(--surface-soft, var(--bs-tertiary-bg))
    );

  color: var(--text, var(--bs-body-color));

  box-shadow: 0 .45rem 1.1rem rgba(15, 23, 42, .055);

  text-decoration: none;

  transition:
    transform .18s ease,
    background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow var(--transition-med, .25s) ease,
    color var(--transition-med, .25s) ease;
}

.zob-comment-card__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background: var(--primary, var(--bs-primary));
  opacity: .35;

  pointer-events: none;
}

.zob-comment-card__link,
.zob-comment-card__link:hover,
.zob-comment-card__link:focus {
  color: var(--text, var(--bs-body-color));
  text-decoration: none;
}

[data-bs-theme="dark"] .zob-comment-card__link {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 90%, #fff 4%),
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 86%, #000 14%)
    );

  border-color: var(--border, rgba(255,255,255,.1));

  box-shadow: 0 .8rem 1.7rem rgba(0, 0, 0, .42);
}


/* ========== 评论头像：与统计图标尺寸统一 ========== */

.zob-comment-card__avatar {
  width: 2.55rem;
  height: 2.55rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: .95rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

  line-height: 1;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.zob-comment-card__avatar-img,
.zob-comment-card__avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: inherit;
}

[data-bs-theme="dark"] .zob-comment-card__avatar {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}


/* ========== 评论主体 ========== */

.zob-comment-card__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: .28rem;

  min-width: 0;
  width: 100%;
}

.zob-comment-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: .55rem;

  min-width: 0;
}

.zob-comment-card__title {
  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: .9rem;
  font-weight: 650;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

.zob-comment-card__time {
  justify-self: end;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .72rem;
  line-height: 1.35;

  opacity: .72;

  white-space: nowrap;
}

.zob-comment-card__excerpt {
  max-width: 100%;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .8rem;
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

.zob-comment-card__meta {
  color: var(--muted, var(--bs-secondary-color));

  font-size: .72rem;
  line-height: 1.4;

  opacity: .86;

  overflow-wrap: anywhere;
  word-break: normal;
}

[data-bs-theme="dark"] .zob-comment-card__excerpt,
[data-bs-theme="dark"] .zob-comment-card__meta,
[data-bs-theme="dark"] .zob-comment-card__time {
  color: color-mix(
    in srgb,
    var(--muted, var(--bs-secondary-color)) 88%,
    #fff 12%
  );
}


/* ========== Hover / Focus ========== */

@media (hover: hover) and (pointer: fine) {
  .zob-comment-card__link:hover {
    transform: translateY(-2px);

    border-color: color-mix(
      in srgb,
      var(--border, var(--bs-border-color)) 55%,
      var(--primary, var(--bs-primary)) 45%
    );

    box-shadow: 0 .85rem 1.65rem rgba(15, 23, 42, .11);
  }

  .zob-comment-card__link:hover .zob-comment-card__avatar {
    transform: scale(1.04);

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 16%,
      transparent
    );

    border-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 42%,
      transparent
    );
  }

  .zob-comment-card__link:hover .zob-comment-card__title {
    color: var(--primary, var(--bs-primary));
  }

  [data-bs-theme="dark"] .zob-comment-card__link:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .55);
  }
}

.zob-comment-card__link:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 空状态 ========== */

.zob-comments-empty {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .85rem .9rem;

  border: 1px dashed var(--border, var(--bs-border-color));
  border-radius: var(--radius-lg, 1rem);

  color: var(--muted, var(--bs-secondary-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));

  font-size: .86rem;
  line-height: 1.4;
}

.zob-comments-empty i {
  color: var(--primary, var(--bs-primary));
}


/* ========== Pad / 中等屏优化 ========== */

@media (min-width: 576px) and (max-width: 1024px) {
  .zob-comment-card__link {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .68rem;

    padding: .84rem .86rem;
  }

  .zob-comment-card__avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .85rem;
  }

  .zob-comment-card__title {
    font-size: .88rem;
  }

  .zob-comment-card__excerpt {
    font-size: .78rem;
  }
}


/* ========== 手机端优化 ========== */

@media (max-width: 575.98px) {
  .zob-comments-panel {
    padding-top: .75rem;
    padding-bottom: .9rem;
  }

  .zob-comments-panel__head {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: .6rem;

    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }

  .zob-comments-panel__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .75rem;
  }

  .zob-comments-panel__title {
    font-size: 1rem;
  }

  .zob-comment-card__link {
    grid-template-columns: 2.12rem minmax(0, 1fr);
    gap: .65rem;

    padding: .82rem .78rem;

    border-radius: .9rem;
  }

  .zob-comment-card__avatar {
    width: 2.12rem;
    height: 2.12rem;
    border-radius: .76rem;
  }

  .zob-comment-card__top {
    grid-template-columns: 1fr;
    gap: .18rem;
  }

  .zob-comment-card__time {
    justify-self: start;
    font-size: .7rem;
  }

  .zob-comment-card__title {
    font-size: .86rem;
    line-height: 1.35;
  }

  .zob-comment-card__excerpt {
    font-size: .76rem;
    line-height: 1.42;
  }

  .zob-comment-card__meta {
    font-size: .7rem;
  }
}


/* ========== 极窄屏兜底 ========== */

@media (max-width: 380px) {
  .zob-comment-card__link {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    gap: .55rem;
  }

  .zob-comment-card__avatar {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .7rem;
  }

  .zob-comment-card__excerpt {
    -webkit-line-clamp: 3;
  }
}


/* ========== 减少动效模式 ========== */

@media (prefers-reduced-motion: reduce) {
  .zob-comments-panel,
  .zob-comments-panel *,
  .zob-comments-panel *::before,
  .zob-comments-panel *::after {
    transition: none !important;
  }

  .zob-comment-card__link:hover,
  .zob-comment-card__link:hover .zob-comment-card__avatar {
    transform: none !important;
  }
}

/* ================================================================================
   侧边栏小工具：友情链接
   --------------------------------------------------------------------------------
   功能范围：
   1）控制友情链接小工具的整体面板、标题栏、友链卡片、站点名称、域名、
      外链箭头、操作按钮、展开区域、空状态和明暗模式。
   2）适配新版 HTML 结构：
      - .zob-friends-panel
      - .zob-friends-panel__head
      - .zob-friends-panel__icon
      - .zob-friends-panel__title
      - .zob-friends-panel__grid
      - .zob-friend-card
      - .zob-friend-card__icon
      - .zob-friend-card__body
      - .zob-friend-card__name
      - .zob-friend-card__host
      - .zob-friend-card__arrow
      - .zob-friends-panel__actions
      - .zob-friends-action
      - .zob-friends-empty
   3）设计目标：
      - 与统计模块、最新评论模块保持统一 ZOB 卡片风格。
      - 不再依赖 Bootstrap list-group / friend-row 控制核心布局。
      - 友链名称和域名过长时不撑破侧边栏。
      - 支持 1 列 / 2 列。
      - 支持白天 / 黑夜模式。
   ================================================================================ */


/* ========== 友情链接面板外层 ========== */

.zob-friends-panel {
  width: 100%;
  min-width: 0;

  padding: .25rem 0 1rem;

  color: var(--text, var(--bs-body-color));

  transition:
    color var(--transition-med, .25s) ease,
    background-color var(--transition-med, .25s) ease;
}


/* ========== 顶部标题栏：与统计 / 评论模块统一 ========== */

.zob-friends-panel__head {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;

  min-width: 0;

  padding: .2rem 0 .9rem;
  margin: 0 0 .85rem;

  border-bottom: 1px solid var(--border, var(--bs-border-color));
}

.zob-friends-panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 3.5rem;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--primary, var(--bs-primary)),
    color-mix(in srgb, var(--primary, var(--bs-primary)) 25%, transparent)
  );
}

.zob-friends-panel__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 12%,
    transparent
  );

  border: 1px solid color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  line-height: 1;
}

.zob-friends-panel__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

.zob-friends-panel__title {
  margin: 0;

  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-friends-panel__icon {
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 35%,
    transparent
  );
}


/* ========== 友链列表 ========== */

.zob-friends-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;

  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .zob-friends-panel__grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.zob-friends-panel__collapse {
  margin-top: .65rem;
}


/* ========== 单条友链卡片 ========== */

.zob-friend-card {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .68rem;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding: .72rem .78rem;

  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, var(--bs-border-color));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 96%, #fff 4%),
      var(--surface-soft, var(--bs-tertiary-bg))
    );

  color: var(--text, var(--bs-body-color));

  box-shadow: 0 .35rem .95rem rgba(15, 23, 42, .05);

  text-decoration: none;

  transition:
    transform .18s ease,
    background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow var(--transition-med, .25s) ease,
    color var(--transition-med, .25s) ease;
}

.zob-friend-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background: var(--primary, var(--bs-primary));
  opacity: .32;

  pointer-events: none;
}

.zob-friend-card,
.zob-friend-card:hover,
.zob-friend-card:focus {
  color: var(--text, var(--bs-body-color));
  text-decoration: none;
}

[data-bs-theme="dark"] .zob-friend-card {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 90%, #fff 4%),
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 86%, #000 14%)
    );

  border-color: var(--border, rgba(255,255,255,.1));

  box-shadow: 0 .75rem 1.45rem rgba(0, 0, 0, .38);
}


/* ========== 友链左侧图标 ========== */

.zob-friend-card__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

  line-height: 1;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.zob-friend-card__icon i {
  font-size: 1rem;
  line-height: 1;
}

[data-bs-theme="dark"] .zob-friend-card__icon {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}


/* ========== 友链文字 ========== */

.zob-friend-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: .12rem;

  min-width: 0;
}

.zob-friend-card__name {
  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: .86rem;
  font-weight: 650;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zob-friend-card__host {
  min-width: 0;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .72rem;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-friend-card__host {
  color: color-mix(
    in srgb,
    var(--muted, var(--bs-secondary-color)) 88%,
    #fff 12%
  );
}


/* ========== 外链箭头 ========== */

.zob-friend-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.45rem;
  height: 1.45rem;

  border-radius: 999px;

  color: var(--muted, var(--bs-secondary-color));

  background-color: color-mix(
    in srgb,
    var(--surface-soft, var(--bs-tertiary-bg)) 86%,
    var(--primary, var(--bs-primary)) 14%
  );

  font-size: .78rem;
  line-height: 1;

  opacity: .82;

  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}


/* ========== Hover / Focus ========== */

@media (hover: hover) and (pointer: fine) {
  .zob-friend-card:hover {
    transform: translateY(-2px);

    border-color: color-mix(
      in srgb,
      var(--border, var(--bs-border-color)) 55%,
      var(--primary, var(--bs-primary)) 45%
    );

    box-shadow: 0 .75rem 1.45rem rgba(15, 23, 42, .1);
  }

  .zob-friend-card:hover .zob-friend-card__icon {
    transform: scale(1.04);

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 16%,
      transparent
    );

    border-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 42%,
      transparent
    );
  }

  .zob-friend-card:hover .zob-friend-card__name {
    color: var(--primary, var(--bs-primary));
  }

  .zob-friend-card:hover .zob-friend-card__arrow {
    transform: translate(2px, -2px);

    color: var(--primary, var(--bs-primary));

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 14%,
      transparent
    );

    opacity: 1;
  }

  [data-bs-theme="dark"] .zob-friend-card:hover {
    box-shadow: 0 .95rem 1.85rem rgba(0, 0, 0, .52);
  }
}

.zob-friend-card:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 操作按钮 ========== */

.zob-friends-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;

  margin-top: .7rem;
}

@media (min-width: 420px) {
  .zob-friends-panel__actions:has(.zob-friends-action + .zob-friends-action) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.zob-friends-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 2.15rem;

  padding: .45rem .75rem;

  border-radius: 999px;
  border: 1px solid var(--border, var(--bs-border-color));

  font-size: .78rem;
  font-weight: 650;
  line-height: 1.2;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform .16s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.zob-friends-action--secondary {
  color: var(--text, var(--bs-body-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));
}

.zob-friends-action--primary {
  color: var(--primary, var(--bs-primary));
  background-color: color-mix(
    in srgb,
    var(--surface-soft, var(--bs-tertiary-bg)) 86%,
    var(--primary, var(--bs-primary)) 14%
  );
  border-color: color-mix(
    in srgb,
    var(--border, var(--bs-border-color)) 50%,
    var(--primary, var(--bs-primary)) 50%
  );
}

@media (hover: hover) and (pointer: fine) {
  .zob-friends-action:hover {
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 .45rem 1rem rgba(15, 23, 42, .09);
  }

  .zob-friends-action--primary:hover {
    color: #fff;
    background-color: var(--primary, var(--bs-primary));
    border-color: var(--primary, var(--bs-primary));
  }
}

.zob-friends-action:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 空状态 ========== */

.zob-friends-empty {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .85rem .9rem;

  border: 1px dashed var(--border, var(--bs-border-color));
  border-radius: var(--radius-lg, 1rem);

  color: var(--muted, var(--bs-secondary-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));

  font-size: .86rem;
  line-height: 1.4;
}

.zob-friends-empty i {
  color: var(--primary, var(--bs-primary));
}


/* ========== Pad / 中等屏优化 ========== */

@media (min-width: 576px) and (max-width: 1024px) {
  .zob-friend-card {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: .62rem;

    padding: .68rem .72rem;
  }

  .zob-friend-card__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .8rem;
  }

  .zob-friend-card__name {
    font-size: .84rem;
  }

  .zob-friend-card__host {
    font-size: .7rem;
  }
}


/* ========== 手机端优化 ========== */

@media (max-width: 575.98px) {
  .zob-friends-panel {
    padding-top: .75rem;
    padding-bottom: .9rem;
  }

  .zob-friends-panel__head {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: .6rem;

    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }

  .zob-friends-panel__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .75rem;
  }

  .zob-friends-panel__title {
    font-size: 1rem;
  }

  .zob-friend-card {
    grid-template-columns: 2.08rem minmax(0, 1fr) auto;
    gap: .58rem;

    padding: .66rem .68rem;

    border-radius: .9rem;
  }

  .zob-friend-card__icon {
    width: 2.08rem;
    height: 2.08rem;
    border-radius: .74rem;
  }

  .zob-friend-card__arrow {
    display: none;
  }

  .zob-friend-card__name {
    font-size: .83rem;
  }

  .zob-friend-card__host {
    font-size: .69rem;
  }
}


/* ========== 极窄屏兜底 ========== */

@media (max-width: 380px) {
  .zob-friend-card {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    gap: .52rem;
  }

  .zob-friend-card__icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .7rem;
  }
}


/* ========== 减少动效模式 ========== */

@media (prefers-reduced-motion: reduce) {
  .zob-friends-panel,
  .zob-friends-panel *,
  .zob-friends-panel *::before,
  .zob-friends-panel *::after {
    transition: none !important;
  }

  .zob-friend-card:hover,
  .zob-friend-card:hover .zob-friend-card__icon,
  .zob-friend-card:hover .zob-friend-card__arrow,
  .zob-friends-action:hover {
    transform: none !important;
  }
}

/* ================================================================================
   侧边栏小工具：热门文章
   --------------------------------------------------------------------------------
   功能范围：
   1）控制热门文章小工具的整体面板、标题栏、热门文章卡片、缩略图、排名、
      标题、日期、阅读量、外链箭头、空状态和明暗模式。
   2）适配新版 HTML 结构：
      - .zob-hotposts-panel
      - .zob-hotposts-panel__head
      - .zob-hotposts-panel__icon
      - .zob-hotposts-panel__title
      - .zob-hotposts-panel__list
      - .zob-hotpost-card
      - .zob-hotpost-card__link
      - .zob-hotpost-card__thumb
      - .zob-hotpost-card__rank
      - .zob-hotpost-card__main
      - .zob-hotpost-card__title
      - .zob-hotpost-card__meta
      - .zob-hotpost-card__date
      - .zob-hotpost-card__views
      - .zob-hotpost-card__arrow
      - .zob-hotposts-empty
   3）设计目标：
      - 与统计、最新评论、友情链接小工具保持统一 ZOB 卡片风格。
      - 不再依赖 Bootstrap list-group / d-flex 控制核心布局。
      - 长标题、长日期、浏览量不挤压。
      - 支持有缩略图 / 无缩略图两种状态。
      - 支持白天 / 黑夜模式。
   ================================================================================ */


/* ========== 热门文章面板外层 ========== */

.zob-hotposts-panel {
  width: 100%;
  min-width: 0;

  padding: .25rem 0 1rem;

  color: var(--text, var(--bs-body-color));

  transition:
    color var(--transition-med, .25s) ease,
    background-color var(--transition-med, .25s) ease;
}


/* ========== 顶部标题栏：与其它侧边栏小工具统一 ========== */

.zob-hotposts-panel__head {
  position: relative;

  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;

  min-width: 0;

  padding: .2rem 0 .9rem;
  margin: 0 0 .85rem;

  border-bottom: 1px solid var(--border, var(--bs-border-color));
}

.zob-hotposts-panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 3.5rem;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--primary, var(--bs-primary)),
    color-mix(in srgb, var(--primary, var(--bs-primary)) 25%, transparent)
  );
}

.zob-hotposts-panel__icon {
  width: 2.35rem;
  height: 2.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .85rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 12%,
    transparent
  );

  border: 1px solid color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  line-height: 1;
}

.zob-hotposts-panel__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

.zob-hotposts-panel__title {
  margin: 0;

  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-theme="dark"] .zob-hotposts-panel__icon {
  background-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 20%,
    transparent
  );

  border-color: color-mix(
    in srgb,
    var(--primary, var(--bs-primary)) 35%,
    transparent
  );
}


/* ========== 热门文章列表 ========== */

.zob-hotposts-panel__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;

  width: 100%;
  min-width: 0;
}


/* ========== 单条热门文章卡片 ========== */

.zob-hotpost-card {
  min-width: 0;
}

.zob-hotpost-card__link {
  position: relative;

  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;

  width: 100%;
  min-width: 0;
  overflow: hidden;

  padding: .82rem .86rem;

  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border, var(--bs-border-color));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 96%, #fff 4%),
      var(--surface-soft, var(--bs-tertiary-bg))
    );

  color: var(--text, var(--bs-body-color));

  box-shadow: 0 .4rem 1rem rgba(15, 23, 42, .052);

  text-decoration: none;

  transition:
    transform .18s ease,
    background-color var(--transition-med, .25s) ease,
    border-color var(--transition-med, .25s) ease,
    box-shadow var(--transition-med, .25s) ease,
    color var(--transition-med, .25s) ease;
}

.zob-hotpost-card__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background: var(--primary, var(--bs-primary));
  opacity: .32;

  pointer-events: none;
}

.zob-hotpost-card__link,
.zob-hotpost-card__link:hover,
.zob-hotpost-card__link:focus {
  color: var(--text, var(--bs-body-color));
  text-decoration: none;
}

[data-bs-theme="dark"] .zob-hotpost-card__link {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 90%, #fff 4%),
      color-mix(in srgb, var(--surface-soft, var(--bs-tertiary-bg)) 86%, #000 14%)
    );

  border-color: var(--border, rgba(255,255,255,.1));

  box-shadow: 0 .75rem 1.45rem rgba(0, 0, 0, .38);
}


/* ========== 缩略图 / 排名区域 ========== */

.zob-hotpost-card__thumb,
.zob-hotpost-card__rank {
  width: 2.45rem;
  height: 2.45rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: .9rem;

  color: var(--primary, var(--bs-primary));

  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

  overflow: hidden;

  line-height: 1;

  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.zob-hotpost-card__rank {
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.zob-hotpost-card__thumb-img,
.zob-hotpost-card__thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: inherit;
}

[data-bs-theme="dark"] .zob-hotpost-card__thumb,
[data-bs-theme="dark"] .zob-hotpost-card__rank {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}


/* ========== 文章主体 ========== */

.zob-hotpost-card__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;

  min-width: 0;
  width: 100%;
}

.zob-hotpost-card__title {
  min-width: 0;

  color: var(--bs-emphasis-color);

  font-size: .88rem;
  font-weight: 650;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

.zob-hotpost-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;

  min-width: 0;

  color: var(--muted, var(--bs-secondary-color));

  font-size: .72rem;
  line-height: 1.35;
}

.zob-hotpost-card__meta span,
.zob-hotpost-card__meta .post-views,
.zob-hotpost-card__views {
  display: inline-flex;
  align-items: center;
  gap: .22rem;

  min-width: 0;
  max-width: 100%;

  color: inherit;
}

.zob-hotpost-card__meta .bi {
  width: auto;
  text-align: center;
  opacity: .9;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

[data-bs-theme="dark"] .zob-hotpost-card__meta {
  color: color-mix(
    in srgb,
    var(--muted, var(--bs-secondary-color)) 88%,
    #fff 12%
  );
}


/* ========== 外链箭头 ========== */

.zob-hotpost-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.45rem;
  height: 1.45rem;

  border-radius: 999px;

  color: var(--muted, var(--bs-secondary-color));

  background-color: color-mix(
    in srgb,
    var(--surface-soft, var(--bs-tertiary-bg)) 86%,
    var(--primary, var(--bs-primary)) 14%
  );

  font-size: .78rem;
  line-height: 1;

  opacity: .82;

  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}


/* ========== Hover / Focus ========== */

@media (hover: hover) and (pointer: fine) {
  .zob-hotpost-card__link:hover {
    transform: translateY(-2px);

    border-color: color-mix(
      in srgb,
      var(--border, var(--bs-border-color)) 55%,
      var(--primary, var(--bs-primary)) 45%
    );

    box-shadow: 0 .75rem 1.45rem rgba(15, 23, 42, .1);
  }

  .zob-hotpost-card__link:hover .zob-hotpost-card__thumb,
  .zob-hotpost-card__link:hover .zob-hotpost-card__rank {
    transform: scale(1.04);

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 16%,
      transparent
    );

    border-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 42%,
      transparent
    );
  }

  .zob-hotpost-card__link:hover .zob-hotpost-card__title {
    color: var(--primary, var(--bs-primary));
  }

  .zob-hotpost-card__link:hover .zob-hotpost-card__arrow {
    transform: translate(2px, -2px);

    color: var(--primary, var(--bs-primary));

    background-color: color-mix(
      in srgb,
      var(--primary, var(--bs-primary)) 14%,
      transparent
    );

    opacity: 1;
  }

  .zob-hotpost-card__link:hover .zob-hotpost-card__meta .bi {
    opacity: 1;
    transform: scale(1.05);
  }

  [data-bs-theme="dark"] .zob-hotpost-card__link:hover {
    box-shadow: 0 .95rem 1.85rem rgba(0, 0, 0, .52);
  }
}

.zob-hotpost-card__link:focus-visible {
  outline: 2px solid var(--focus, var(--bs-primary));
  outline-offset: 2px;
}


/* ========== 空状态 ========== */

.zob-hotposts-empty {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .85rem .9rem;

  border: 1px dashed var(--border, var(--bs-border-color));
  border-radius: var(--radius-lg, 1rem);

  color: var(--muted, var(--bs-secondary-color));
  background-color: var(--surface-soft, var(--bs-tertiary-bg));

  font-size: .86rem;
  line-height: 1.4;
}

.zob-hotposts-empty i {
  color: var(--primary, var(--bs-primary));
}


/* ========== Pad / 中等屏优化 ========== */

@media (min-width: 576px) and (max-width: 1024px) {
  .zob-hotpost-card__link {
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
    gap: .65rem;

    padding: .78rem .8rem;
  }

  .zob-hotpost-card__thumb,
  .zob-hotpost-card__rank {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .82rem;
  }

  .zob-hotpost-card__title {
    font-size: .86rem;
  }

  .zob-hotpost-card__meta {
    font-size: .7rem;
  }
}


/* ========== 手机端优化 ========== */

@media (max-width: 575.98px) {
  .zob-hotposts-panel {
    padding-top: .75rem;
    padding-bottom: .9rem;
  }

  .zob-hotposts-panel__head {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: .6rem;

    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }

  .zob-hotposts-panel__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .75rem;
  }

  .zob-hotposts-panel__title {
    font-size: 1rem;
  }

  .zob-hotpost-card__link {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    gap: .58rem;

    padding: .72rem .72rem;

    border-radius: .9rem;
  }

  .zob-hotpost-card__thumb,
  .zob-hotpost-card__rank {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .76rem;
  }

  .zob-hotpost-card__title {
    font-size: .84rem;
  }

  .zob-hotpost-card__meta {
    font-size: .68rem;
  }

  .zob-hotpost-card__arrow {
    display: none;
  }
}


/* ========== 极窄屏兜底 ========== */

@media (max-width: 380px) {
  .zob-hotpost-card__link {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    gap: .52rem;
  }

  .zob-hotpost-card__thumb,
  .zob-hotpost-card__rank {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .7rem;
  }

  .zob-hotpost-card__title {
    -webkit-line-clamp: 3;
  }
}


/* ========== 减少动效模式 ========== */

@media (prefers-reduced-motion: reduce) {
  .zob-hotposts-panel,
  .zob-hotposts-panel *,
  .zob-hotposts-panel *::before,
  .zob-hotposts-panel *::after {
    transition: none !important;
  }

  .zob-hotpost-card__link:hover,
  .zob-hotpost-card__link:hover .zob-hotpost-card__thumb,
  .zob-hotpost-card__link:hover .zob-hotpost-card__rank,
  .zob-hotpost-card__link:hover .zob-hotpost-card__arrow {
    transform: none !important;
  }
}

/*
   说明：网站统计小工具 `.zob-stats-widget` 已统一移动并合并到模块 09。
   本模块只保留其它侧边栏小工具，例如最新评论、友情链接、热门文章等。
*/

/* ============================== 模块 23 结束：侧边栏小工具集合 ============================== */

/* ================================================================================
   模块 24：首页置顶文章
   --------------------------------------------------------------------------------
   功能范围：控制首页置顶/精选文章区域的卡片、封面图、渐变遮罩、标题截断、作者信息、日期、浏览量、评论数和响应式布局。
   主要包含：`.zob-sticky-*`、`.zob-featured-*` 或首页置顶文章相关卡片、媒体、元信息选择器。
   维护建议：优化首页顶部精选文章展示、封面比例、标题两行截断、遮罩层、移动端堆叠时集中改本模块。
   注意事项：本模块是文章首页精选区，不是产品首页主推产品区；产品首页相关样式仍应放在产品模块或后续新增独立首页产品模块。
   模块边界：从此处开始，到“模块 24 结束：首页置顶文章”为止。
   ================================================================================ */

#sticky-featured {
  --sticky-overlay-bg: rgba(0, 0, 0, .18);
  --sticky-overlay-bg-hover: rgba(0, 0, 0, .28);
  --sticky-mask-grad: linear-gradient(
    180deg,
    rgba(0,0,0,0) 52%,
    rgba(0,0,0,.25) 82%,
    rgba(0,0,0,.44) 100%
  );
  --sticky-title-shadow: 0 1px 3px rgba(0,0,0,.28);
  --sticky-focus-ring: 0 0 0 .2rem rgba(13,110,253,.4);
}

[data-bs-theme="dark"] #sticky-featured {
  --sticky-overlay-bg: rgba(16,18,22,.46);
  --sticky-overlay-bg-hover: rgba(16,18,22,.6);
  --sticky-mask-grad: linear-gradient(
    180deg,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,.32) 85%,
    rgba(0,0,0,.56) 100%
  );
}

.object-fit-cover {
  object-fit: cover;
}

#sticky-featured .sticky-card {
  background-color: var(--bs-body-bg, #fff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  border-radius: 1.1rem;
  overflow: hidden;
  transition: transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

[data-bs-theme="dark"] #sticky-featured .sticky-card {
  background-color: rgba(15,17,23,.92);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .65);
}

@media (hover: hover) and (pointer: fine) {
  #sticky-featured .sticky-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
  }
}

@media (hover: hover) and (pointer: fine) {
  #sticky-featured .sticky-card__media img {
    transition: transform .5s ease;
    will-change: transform;
  }

  #sticky-featured .sticky-card:hover .sticky-card__media img {
    transform: scale(1.04);
  }
}

#sticky-featured .sticky-card__mask {
  position: absolute;
  inset: 0;
  background: var(--sticky-mask-grad);
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  #sticky-featured .sticky-card:hover .sticky-card__mask {
    opacity: .97;
  }
}

#sticky-featured .sticky-card__content {
  position: absolute;
  inset-inline: .6rem;
  bottom: .6rem;
  z-index: 2;
  padding: .75rem 1rem;
  background: var(--sticky-overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: .9rem;
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background .25s ease,
    transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  #sticky-featured .sticky-card:hover .sticky-card__content {
    background: var(--sticky-overlay-bg-hover);
    transform: translateY(-1px);
  }
}

@media (min-width: 768px) {
  #sticky-featured .sticky-card__content {
    padding: .9rem 1.15rem;
  }
}

#sticky-featured .sticky-card__title {
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(0.95rem, 0.79vw + 0.79rem, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--sticky-title-shadow);
  margin: 0 0 .35rem 0;
}

#sticky-featured .sticky-card__title a {
  color: #fff;
  text-decoration: none;
  outline: none;
}

#sticky-featured .sticky-card__title a:hover {
  text-decoration: underline;
}

#sticky-featured .sticky-card__meta {
  font-size: .82rem;
  opacity: .92;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}

#sticky-featured .sticky-card__meta i {
  margin-right: .25rem;
}

#sticky-featured .sticky-card:focus-within {
  outline: none;
  box-shadow: var(--sticky-focus-ring);
  border-radius: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  #sticky-featured .sticky-card__media img,
  #sticky-featured .sticky-card__content,
  #sticky-featured .sticky-card__mask,
  #sticky-featured .sticky-card {
    transition: none !important;
  }
}

@media (max-width: 575.98px) {
  #sticky-featured {
    position: relative;
  }

  #sticky-featured .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
  }

  #sticky-featured .row > .col {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
  }

  #sticky-featured .row::-webkit-scrollbar {
    height: 4px;
  }

  #sticky-featured .row::-webkit-scrollbar-track {
    background: transparent;
  }

  #sticky-featured .row::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }

  [data-bs-theme="dark"] #sticky-featured .row::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.28);
  }

  #sticky-featured .sticky-card__content {
    inset-inline: .5rem;
    bottom: .5rem;
    padding: .6rem .85rem;
    min-height: 4rem;
  }
}

/* ============================== 模块 24 结束：首页置顶文章 ============================== */

/* ================================================================================
   模块 25：Preloader 加载动画
   --------------------------------------------------------------------------------
   功能范围：控制页面预加载遮罩、加载图标、动画节奏、隐藏状态和明暗模式下的加载视觉。
   主要包含：`.preloader`、`.zob-preloader-*`、加载 spinner、加载文字、隐藏/淡出状态和相关 `@keyframes`。
   维护建议：优化页面加载动画、减少遮挡时间、加载图标大小、关闭动画兼容时集中改本模块。
   注意事项：预加载层如果层级过高或隐藏失败，会遮挡整站；修改后必须测试首页、文章页、产品页刷新加载。
   模块边界：从此处开始，到“模块 25 结束：Preloader 加载动画”为止。
   ================================================================================ */

.zob-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(var(--bs-primary-rgb, 13, 110, 253), .08), transparent 38%),
    var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease,
    visibility .38s ease;
}

[data-bs-theme="dark"] .zob-preloader {
  background: radial-gradient(circle at top, rgba(var(--bs-primary-rgb, 13, 110, 253), .16), transparent 40%),
    #000;
  color: var(--bs-body-color, #f8f9fa);
}

.zob-preloader.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.zob-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 1.25rem;
  text-align: center;
  transform: translateY(-.5rem);
}

.zob-preloader-orbit {
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.zob-preloader-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--bs-border-color-translucent);
  background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 90deg,
      rgba(var(--bs-primary-rgb, 13, 110, 253), .85) 160deg,
      transparent 260deg,
      transparent 360deg
    );
  mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );
  -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );
  animation: zob-preloader-spin 1.05s linear infinite;
}

.zob-preloader-dot {
  position: absolute;
  top: .1rem;
  left: 50%;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 1rem rgba(var(--bs-primary-rgb, 13, 110, 253), .75);
  transform: translateX(-50%);
  animation: zob-preloader-dot-pulse 1.05s ease-in-out infinite;
}

.zob-preloader-core {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--bs-primary);
  background: color-mix(
    in srgb,
    var(--bs-primary) 9%,
    var(--bs-body-bg, #fff) 91%
  );
  border: 1px solid color-mix(
    in srgb,
    var(--bs-primary) 28%,
    var(--bs-border-color, rgba(0,0,0,.12)) 72%
  );
  box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.45);
}

[data-bs-theme="dark"] .zob-preloader-core {
  background: color-mix(
    in srgb,
    var(--bs-primary) 14%,
    #020617 86%
  );
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1rem 2.2rem rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.zob-preloader-text {
  max-width: 14rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bs-emphasis-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zob-preloader-subtext {
  position: relative;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

.zob-preloader-subtext::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: zob-preloader-dots 1.2s steps(4, end) infinite;
}

@keyframes zob-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zob-preloader-dot-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(.9);
    opacity: .65;
  }

  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
}

@keyframes zob-preloader-dots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75%,
  100% {
    content: "...";
  }
}

@media (prefers-reduced-motion: reduce) {
  .zob-preloader,
  .zob-preloader *,
  .zob-preloader *::before,
  .zob-preloader *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================== 模块 25 结束：Preloader 加载动画 ============================== */