@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.
*/

/* =========================================================
   全局：字体与基础变量（白天/黑夜通过 data-bs-theme 切换）
   - 将可调颜色集中到 :root / [data-bs-theme="dark"]
   - 新增令牌：阴影、圆角、导航高度、Harmony 色板
========================================================= */

/* 默认字体族（保留原 Noto 优先列表） */
: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);

  /* 基础色（light） */
  --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);

  /* Harmony 色板（与主题协调） */
  --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%);

  /* 代码颜色（light） */
  --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);

  /* Harmony 色板（dark） */
  --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%);

  /* 代码颜色（dark） */
  --code-bg: #0b0d10;
  --code-text: #e6edf3;
  --code-inline: rgba(255,255,255,0.03);
}

/* 系统偏好：仅当未显式设置 data-bs-theme 时生效 */
: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);
  -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); }

/* 全局链接统一到新的 link 令牌 */
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);
}

/* 触屏设备关闭昂贵 hover 动效 */
@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; }
}

/* =========================================================
   1. 顶栏 / 搜索 / 登录
========================================================= */
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 */
.topbar .dropdown-toggle {
  display: flex; align-items: center; padding: 0;
  border: none; background: none; box-shadow: none !important;
}
/* 恢复并美化小箭头 caret */
.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; }

/* 若使用图标 <i class="bi bi-chevron-down"> 同样联动 */
.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 BUTTON (Enterprise Stable Version)
 * ====================================================== */

/* 基础按钮结构 */
.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;
}

/* Hover */
.zob-login-btn:hover{
    text-decoration:none;
    color:inherit;

    transform:translateY(-1px);

    box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* Active（点击按下） */
.zob-login-btn:active{
    transform:translateY(0);
    box-shadow:none;
}

/* Focus（防止蓝色外框/默认阴影） */
.zob-login-btn:focus,
.zob-login-btn:focus-visible{
    outline:none;
    box-shadow:none;
    text-decoration:none;
}

/* 访问过状态（防紫色） */
.zob-login-btn:visited{
    color:inherit;
}

/* ======================================================
 * Bootstrap 干扰强制覆盖
 * ====================================================== */
.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;
}

/* =========================================================
   2. 侧边栏
========================================================= */
/* =========================================================
   ZOB · 侧边导航栏（Pro 进阶版）
   - 适配 data-bs-theme 明暗模式
   - 桌面固定 / 移动 Offcanvas
   - 支持折叠菜单 + 子菜单
========================================================= */

#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;
}

/* 让 sticky 元素与导航条高度对齐 */
.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;
}

/* hover / focus 效果：轻微背景 + 位移 */
#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;
}

/* 当前激活项（含 is-active 兼容类） */
#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); /* active 不再位移，防止抖动 */
}

/* 折叠菜单标题（父级） */
.zob-collapse-toggle {
  cursor: pointer;
  user-select: none;
}

/* 父级右侧小箭头容器，建议在 HTML 中加一个 span.zob-toggle-icon 包住图标 */
.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;
}

/* 展开时旋转 180° */
.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);
}

/* 子菜单 hover：文字回到主文本颜色 */
.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-collapse-content .list-group-item i {
  font-size: 1rem;
  margin-right: .5rem;
}
*/

/* 分组标题（如果有类似“小标题”的元素） */
.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;
  }

  /* 在屏幕略窄但仍是桌面时（如 992-1200），稍微压缩一点内边距 */
  @media (max-width: 1199.98px) {
    #sidebar .list-group-item {
      padding-inline: .9rem;
    }
  }
}

/* 移动端 / 平板 Offcanvas 行为 */
@media (max-width: 991.98px) {
  /* 主内容不再让位 */
  .main-content {
    margin-left: 0 !important;
  }

  /* 移动端 offcanvas 宽度更合理 */
  #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;
  }
}

/* ===========================
   ZOB · 侧边栏整体
   - 确保 offcanvas-body 内部能充满高度
=========================== */

#sidebar .offcanvas-body {
  /* bootstrap 已有 flex-grow、overflow，可加一点保障 */
  min-height: 0; /* 避免子元素 overflow-auto 时高度计算异常 */
}

/* =========================================
   ZOB · 左侧导航 · 贴底 RSS 部分
========================================= */

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

/* 底部 RSS 按钮（整体点击区域重置） */
#sidebar .sidebar-rss-bottom {
  color: var(--muted, #6b7280);
  font-size: .85rem;
  gap: .25rem;
  cursor: pointer;
  transition: color .16s ease-out;
}

/* 左侧 RSS 图标 */
#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;
}

/* 右侧小 chip */
#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;
}

/* =========================================================
   3. 首页大屏动画（无脚本/打印隐藏）
========================================================= */
.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; } }

/* =========================================================
   4. 小工具-集成到模块
========================================================= */

/* =========================================================
   ZOB · 作者信息 / 站点信息小卡片（侧边栏小工具 · 完整 CSS）
   - 统一小工具视觉：surface-soft + border + shadow
   - 头像渐变描边
   - 多平台社交按钮分组：创作&视频 / 社交网络 / 即时通讯&联系
   - 支持固话 / 手机 / Email 按钮
   - 适配 data-bs-theme 明暗模式
========================================================= */

/* 卡片整体容器 */
.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);
}

/* 名称 + tagline */
.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;
}

/* 通用幽灵按钮（ghost）样式：社交平台 / 电话 / Email 共用 */
.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;
}

/* =========================================================
   固话 / 手机 / Email 细节强化（可选，但已经默认适配）
========================================================= */

/* 电话 / 手机 / 邮箱图标略微大一点，增强辨识度 */
.zob-btn-phone i,
.zob-btn-mobile i,
.zob-btn-email i {
  font-size: .95em;
}

/* Email 稍微加一点权重，方便用户一扫就看到 */
.zob-btn-email {
  font-weight: 500;
}
/* =========================================================
   ZOB · 作者信息 / 站点信息小卡片（侧边栏小工具 · 完整 CSS）-结束
========================================================= */

/* =========================================================
   5. 通用文章列表
========================================================= */
/* =========================================================
   文章列表（ZOB · 通用列表样式）
   - 依赖容器：<div class="list-group article-list"> ... </div>
   - 图文卡片：移动端一列，桌面图左文右
   - 适配 data-bs-theme 明暗 + ZOB 配色变量
========================================================= */

.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;
}

/* hover / focus 交互 */
@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%)
    );
  }
}

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

/* 缩略图：固定比例，避免 CLS 抖动 */
.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;
}

/* 摘要：2 行截断，降低对比度 */
.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;
}

/* 分类徽标（标题上方的小 pill） */
.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;
  }
}

/* 手机 + Pad 宽度隐藏左侧小竖条（≤ 1024px） */
@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%);
}

/* =========================================================
   列表补充 Post Format
========================================================= */

.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;
}

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

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

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

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

/* Quote */
.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;
}

/* =========================================================
   6. 单篇文章正文（高亮、代码块）
========================================================= */
/* =========================================================
   ZOB · 单篇文章 / 内容排版 / 分享 / 导航 · 完整修复整合版
========================================================= */

/* ========= 单篇文章卡片 ========= */

.single-article.zob-article {
  /* 背景：略高于 body 的“浮层”，不明显偏主色 */
  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);
  }
}

/* CJK（中文/日文/韩文） */
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;
}

/* Pad 额外微调 */
@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 {
    /* 确保在 flex 子元素中，文本截断(text-truncate)能正常生效 */
    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 Theme - 终极强制排版修复
========================================================= */

/* 1. 确保所有正文中的图片基础外观 */
.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;
}

/* 2. 剥夺所有 WordPress 对齐类的“块级”属性 */
/* 我们不使用 display: block，改用 inline-block 或 table */
.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;           /* 必须设为 auto，禁止 width: 100% */
    text-align: center !important;    /* 确保内部居中 */
    float: none !important;           /* 强制取消浮动 */
}

/* 3. 针对图片本身的重置 */
.zob-article-content .aligncenter img,
.zob-article-content a.aligncenter img {
    display: inline-block !important; /* 强制图片为行内块 */
    margin: 0 !important;             /* 禁止图片自带 margin */
    box-shadow: inherit;              /* 继承阴影 */
    vertical-align: top;              /* 修正对齐 */
}

/* 4. 如果您的图片是在段落里的，强制段落居中但不撑开 */
.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);
}

/* =========================================================
   代码区块 (code / pre / kbd / mark)
========================================================= */

/* 多行代码块 (加入 Mac 风格视窗控制与自定义滚动条) */
.zob-article-content pre {
  position: relative;
  margin: 1.5rem 0;
  padding: 2.5rem 1rem 1rem; /* 顶部预留 2.5rem 给 Mac 小圆点 */
  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;
}

/* Mac 风格红黄绿小圆点 */
.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;
}

/* pre 里的 code 不需要额外 padding 与背景 */
.zob-article-content pre code {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  word-break: normal;
}

/* 键盘按键样式 (kbd) */
.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;
}

/* 高亮文本 (mark) */
.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);
}

/* =========================================================
   视频与音频 (Video, Audio & Embeds)
========================================================= */
.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%; /* 强制 16:9 比例 */
  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;
}

/* 强制修复 WordPress 原生 MEJS 播放器宽度溢出问题 */
.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;
}

/* =========================================================
   图集与文件下载 (Gallery & File Blocks)
========================================================= */

/* 古腾堡画廊 */
.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;
}

/* 文件下载块 (WP Block File) */
.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;
}

/* =========================================================
   WordPress 对齐方式与图文混排 (Alignments)
========================================================= */
.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 Theme - Gallery Format Styles (相册格式样式)
   ========================================================================== */

/* 相册容器基础动画 */
.zob-gallery-item {
    /* 使用 CSS 变量适配暗黑模式底色 */
    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); /* 极细的边框增加卡片立体感 */
}

/* 强制图片比例，保持网格整齐 (1/1 为正方形，也可改为 4/3 或 3/2) */
.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 是实现“通透”视觉的关键 */
    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;
}

/* --- Hover 交互状态 --- */

.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 Theme - Image Format Styles (单图格式样式)
   ========================================================================== */

/* 单图链接容器 */
.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);
}

/* --- Hover 交互 --- */
.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 Theme - Video Format Styles (视频格式样式 - 修复黑框版)
   ========================================================================== */

/* 视频容器基础设置 */
.zob-video-showcase {
    background-color: #000; 
    transition: box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 针对第三方内嵌 iframe (如 B站、优酷、YouTube) */
.zob-video-showcase iframe,
.zob-video-showcase embed,
.zob-video-showcase object {
    width: 100% !important;
    aspect-ratio: 16 / 9; /* 原生 CSS 强制 16:9 比例，替代 padding 方案 */
    border: none;
    display: block;
}

/* 针对 WordPress 原生上传的本地 video 标签 */
.zob-video-showcase video {
    width: 100%;
    height: auto;
    max-height: 75vh; /* 防止用户上传竖屏短视频时占满整个屏幕 */
    object-fit: contain; /* 保证视频画面完整显示，不被裁剪 */
    display: block;
}

/* 强制清除 WordPress 自带播放器的硬编码尺寸 (解决黑框的核心) */
.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 Theme - Audio Format Styles (音频格式样式 - 窄屏优化版)
   ========================================================================== */

.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; /* 配合 Bootstrap 的 min-w-0，彻底打破 Flex 布局的最小宽度限制 */
}

.zob-audio-embed-wrapper {
    width: 100%;
    overflow: visible; /* 允许内部原生组件完整渲染 */
}

/* 针对原生安装的播放器、WordPress短代码播放器以及第三方外链 iframe */
.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;
}

/* 针对 WordPress 默认音频播放器容器的硬编码样式清除 */
.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 Theme - Quote Format Styles (引语格式 - 经典编辑器修复版)
   ========================================================================== */

/* 顶置巨幕引语卡片容器 */
.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; /* 确立卡片整体层级 */
}

/* 核心修复 1：彻底擦除经典编辑器或老主题可能自带的 ::before 和 ::after 伪元素引号 */
.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;
}

/* 核心修复 2：优化巨型背景引号的层级、透明度与鼠标穿透 */
.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; /* 将透明度从 10% 降低至 6%，让它若隐若现，绝不干扰文字阅读 */
}

/* 核心修复 3：提升前方文字内容的层级，并建立右侧防撞缓冲区 */
.zob-quote-content-wrapper {
    position: relative;
    z-index: 2;            /* 确保文字层级绝对高于背景水印 */
    padding-right: 2rem;   /* 给右侧腾出 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 Theme - Link Format Styles (链接格式样式)
   ========================================================================== */

/* 链接卡片基础容器 */
.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);
}

/* --- Hover 交互特效 --- */

.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 Theme - Aside Format Styles (日志格式完整美化版)
   ========================================================================== */

/* ------------------------------------
   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;
}

/* ------------------------------------
   2. 正文手账便签区
   ------------------------------------ */

/* 核心：高级手账便签容器 */
.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); 
    
    /* 增加柔和的底层阴影，让便签产生微微浮起的 3D 层次感 */
    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;
}

/* 如果日志中包含了引用内容 (blockquote) 的专属嵌套美化 */
.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); /* 暗黑模式下加深阴影使其更有立体感 */
}
/* ------------------------------------
   3. 日志元数据区 (时间、浏览量、评论)
   ------------------------------------ */

/* 整体排版微调，弱化默认的粗糙感 */
.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);
}

/* 独立强化内部的 Bootstrap Icons (或 SVG) */
.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 Theme - Status Format Styles (状态格式 - 完美双色调优化版)
   ========================================================================== */

/* ------------------------------------
   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);
}

/* ------------------------------------
   2. 核心修复：暗黑黑夜模式自适应
   ------------------------------------ */
[data-bs-theme="dark"] .zob-article-status {
    /* 修复 1：放弃黑夜模式下的绿色渐变背景，改用纯粹且深邃的暗黑透明底色，确保通透不发浑 */
    background: rgba(var(--bs-body-bg-rgb), 0.4) !important;
    
    /* 修复 2：将刺眼的荧光绿边框，降阶为非常克制、深沉的“暗矿绿”边框（降饱和度） */
    border-color: rgba(52, 211, 153, 0.08) !important; 
}

/* 修复 3：暗黑模式下，卡片悬浮时才亮起极其微弱的翡翠背光（可选交互，增加质感） */
[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;
}

/* 修复 4：降低黑夜模式下头像旁呼吸灯的亮度，改用冰薄荷绿，并深色化隔离圈 */
[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);
}

/* 修复 5：暗黑模式下所有“悬浮点亮”的绿色，统一换成高档淡雅的“冰薄荷绿”（#a7f3d0），绝不刺眼 */
[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 Theme - Chat Format Styles (扁平结构无冲突版)
   ========================================================================== */

/* 1. 确保最外层文章卡片溢出隐藏，避免子元素的圆角溢出 */
.zob-article-chat {
    overflow: hidden; 
}

/* 2. 聊天消息流区域，增加一丝丝极浅的底色用来划分聊天室的氛围 */
.zob-article-chat .zob-chat-messages {
    background-color: rgba(var(--bs-secondary-rgb), 0.015);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 3. 核心：将段落完美转换为气泡 */
.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; /* 右侧小尾巴 */
}

/* 4. 解析人名：只需在编辑器中将名字加粗（如 <strong>张三：</strong>） */
.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;
}

/* 5. 聊天区内图片处理 */
.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;
}

/* 右侧气泡：通过 filter 降低主题色的刺眼亮度，使其在黑夜不突兀 */
[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);
}

/* 标签 pill */

.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;
}

/* 只在桌面端给标签 hover 动画 */
@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 · 分享按钮（高级流式质感 + 移动端优化）
========================================================= */

/* 平台主色（定义核心变量） */
.zob-share-facebook  { --_accent: #1877f2; }
.zob-share-x         { --_accent: #0f1419; } /* X 日间模式深灰黑 */
.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; /* 🔔 补充：确保 button 标签在所有浏览器均显示小手光标 */
  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;
}

/* 仅在支持 Hover 的设备启用特效 */
@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;
  }
}

/* =====================================
   深色模式适配 (Dark Mode)
===================================== */
[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;
}

/* 解决 X (Twitter) 黑色在夜间模式下的可读性问题 */
[data-bs-theme="dark"] .zob-share-x {
  --_accent: #e7e9ea; /* 替换为 X 官方的夜间模式亮白灰 */
}

/* 悬停时确保日间/夜间文本对比度 */
[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;
}

/* =========================================================
   文章分页（wp_link_pages）
========================================================= */

.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);
}

/* 移动端抹平分页 hover 视觉（避免奇怪变白） */
@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;
  }
}

/* =========================================================
   上一篇 / 下一篇导航（Bootstrap 5 按钮版 · 最终统一配色）
   配合 zero_post_navigation() 输出：
   <nav class="zob-post-nav-bs d-grid gap-2"> ... <a class="btn btn-outline-secondary"> ... </a> ... </nav>
========================================================= */

/* 布局：两列，手机下一列 */
.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;
}

/* ===== 统一所有状态的配色（浅色模式） =====
   无论 hover / active / focus / visited 都保持同一套颜色
-------------------------------------------------- */
.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;
}

/* ===== 桌面端 hover：只加阴影 & 轻微上浮，不再换底色 ===== */
@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);
  }
}

/* ===== 移动端（包含 iPad / iPad Pro）：
   不再额外改 hover/active，保持上面统一的配色即可 ===== */
@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;
  }
}

/* =========================================================
   图片对齐（Gutenberg + 经典编辑器）
========================================================= */

/* Gutenberg 图片块基础布局 */
.zob-article-content figure.wp-block-image {
  margin: 1.25rem 0;
}

/* 带 figcaption 的图片 */
.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;
}

/* 兼容 .wp-caption */
.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;
  }
}
/* =========================================================
   7. 评论区与表单（ZOB）
========================================================= */
/* =========================================================
   ZOB 评论系统 v1 · 完整 CSS 终版（含手机端 & 去除 li 小黑点）
   - 评论容器 / 表单 / 工具栏
   - 列表 + 嵌套回复
   - 点赞 / 点踩
   - 分页
   - 富文本（blockquote / code / pre）
   - Chrome / Edge ::marker 黑点兼容
========================================================= */

/* ========== 7. 评论区容器 & 顶部汇总 ========== */

/* #comments 外层卡片 */
#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);
}

/* 顶部「共 X 条讨论」 */
.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;
}

/* ========== 8. 评论表单基础样式 ========== */

/* 2. 输入框组 (Input-Group) 融合样式 */
#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%);
}

/* Addon 标签样式 */
#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;     /* 屏蔽原生或 Bootstrap 的内部阴影 */
    background: transparent !important;
    caret-color: var(--primary);     /* 【高级细节】让闪烁的输入光标也变成主题蓝色 */
}

/* ========== 9. 评论编辑器卡片 & 工具栏 ========== */

#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;
}

/* ========== 10. 评论列表（flex 布局 + 嵌套） ========== */

.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%);
}

/* 顶级评论列表：基础重置（不依赖 .comment-list） */
#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;
}

/* ========== 11. 点赞 / 点踩 ========== */

.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;
}

/* ========== 12. 评论正文富文本（blockquote / code / pre） ========== */

#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%);
}

/* 行内 code pill */
#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;
}

/* 多行 pre 代码块 */
#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;
}

/* ========== 13. 顽固 ::marker 黑点终极处理（只动评论结构，不影响正文 ul/li） ========== */

/* 所有评论 li（顶级 + 子评论）：彻底取消 list-style */
#comments li.comment {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0;
  padding-left: 0;
}

/* 顶级 + 子评论的 marker 强制清空（Chrome / Edge） */
#comments li.comment::marker {
  content: "" !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* 子评论 ul.children 自身也不显示任何 bullet */
#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;
}

/* 注意：评论正文里的 <ul><li> 没有 class="comment"，不会被以上规则影响，
   仍然保留正常的小圆点/编号。
*/

/* ========== 15. 手机端嵌套优化补丁（max-width: 575.98px） ========== */

@media (max-width: 575.98px) {

  /* 1）缩短子评论缩进，给正文多一点空间 */
  #comments ul.children,
  #comments ol.children {
    margin: .4rem 0 0 1rem;   /* 原来 2rem，改为 1rem，减少整体偏移 */
    padding-left: .5rem;      /* 保留竖线，但贴边一点即可 */
    border-left-width: 1px;   /* 竖线变细一点，视觉更轻 */
  }

  /* 第 3 层及之后再少一点缩进，防止深层嵌套把宽度吃光 */
  #comments ul.children ul.children,
  #comments ol.children ol.children {
    margin-left: .7rem;
    padding-left: .4rem;
  }

  /* 2）顶部昵称 + 楼层条：允许换行，不要在窄屏硬挤成一行 */
  .zero-list-control-top {
    flex-wrap: wrap;
    padding-inline: .5rem;   /* 略缩内边距，给文字多一点空间 */
    row-gap: .15rem;
  }

  /* 昵称区域占据大约 80% 宽度，右侧留 ~20% 给楼层号 */
  .zero-list-control-top > .flex-grow-1 {
    flex: 0 0 70%;
  }

  /* 楼层号一块略微变小、颜色稍淡一点，存在感有但不抢主标题 */
  .zero-list-control-top > :not(.flex-grow-1) {
    font-size: .75rem;
    opacity: .9;
  }

  /* 3）底部：回复 / 时间 / 点赞 区域允许换行 */
  .zero-list-control-bottom {
    display: flex;
    flex-wrap: wrap;
    row-gap: .15rem;
  }

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

  /* 4）整体卡片在手机上稍微收紧一点 padding */
  #comments.comments-area {
    padding: 1rem 1.1rem;
  }
}

/* ========== 14. 小平板优化（576px - 767.98px，可按需微调） ========== */

@media (min-width: 576px) and (max-width: 767.98px) {

  /* 略减一点缩进，让 3 层嵌套也不至于太挤 */
  #comments ul.children,
  #comments ol.children {
    margin-left: 1.4rem;
  }

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

  /* 外层卡片 padding 略减一点，和文章正文边距更接近 */
  #comments.comments-area {
    padding: 1.1rem 1.25rem;
  }
}

/* =========================================================
   8. 小工具与统计模块（zob-stats-widget）
========================================================= */
.zob-stats-widget { transition: background-color .3s ease, color .3s ease; }
[data-bs-theme="light"] .zob-stats-widget .list-group-item {
  background-color: var(--surface-soft, #f9fafb); border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
[data-bs-theme="light"] .zob-stats-widget .list-group-item:hover {
  background-color: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12);
  box-shadow: 0 3px 6px rgba(0,0,0,.07); transform: translateY(-1px);
}
[data-bs-theme="dark"] .zob-stats-widget .list-group-item {
  background-color: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  transition: background-color .3s ease, border-color .3s ease, transform .2s ease;
}
[data-bs-theme="dark"] .zob-stats-widget .list-group-item:hover {
  background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12);
  box-shadow: 0 2px 5px rgba(0,0,0,.3); transform: translateY(-1px);
}
.zob-stats-widget i {
  width: 2rem; text-align: center; opacity: .85;
  transition: transform .2s ease, opacity .2s ease;
}
.zob-stats-widget small { font-size: .85rem; color: var(--muted); }
.zob-stats-widget .list-group-item:hover i { transform: scale(1.05); opacity: 1; }

/* =========================================================
   9. 下拉菜单/按钮/导航统一到和谐色
========================================================= */
.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%);
}

/* 当前页（active）单独控制，保持类似 Bootstrap 默认效果 */
.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. 可访问性与辅助类
========================================================= */
.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. 打印样式
========================================================= */
@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. 兼容补丁 / 小优化
========================================================= */
/* 避免强制断词影响可读性，优先自动换行 */
* { overflow-wrap: anywhere; }

/* 统一过渡基调，避免频繁重绘 */
.card, .list-group-item, .post-nav {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

/* End of optimized theme css */

/* ===== ZOB Footer · 贴合你的 HTML 结构 ===== */
#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);
}

/* 两列更“靠近”：与你的 row 一致（gx-2/gy-2） */
#site-footer .zf-cta-row {
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
}

/* 标题/说明/按钮尺寸（ZOB 风格） */
#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;
}

/* Newsletter 表单（若短代码输出表单） */
#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; }

/* =========================================================
   13. 面包屑导航优化 (Breadcrumb)
========================================================= */

/* 1. 父容器：强制不换行，控制整体字体大小 */
.zob-list-nav .breadcrumb {
  flex-wrap: nowrap;
  align-items: center;
  font-size: 0.95rem !important; /* 👈 在这里整体调小文字，默认是 1rem */
  /* 确保边框颜色在白天模式下自然 */
  border-bottom-color: rgba(0, 0, 0, 0.08) !important; 
}

/* 2. 基础节点：保证前面的层级文字不换行、不被过度压缩 */
.zob-list-nav .breadcrumb-item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* 3. 当前项（超长截断）：去掉死宽，利用 Flex 自动占满并截断剩余空间 */
.zob-list-nav .breadcrumb-item.active.text-truncate {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none; 
  display: inline-block; 
  color: var(--bs-secondary-color, #6c757d); 
  vertical-align: middle;
}

/* 4. 分隔符微调：防止跟着外层 fw-bold 变粗，显得不够精致 */
.zob-list-nav .breadcrumb-item + .breadcrumb-item::before {
  font-weight: 400; 
  font-size: 0.9em;
  opacity: 0.6;
}

/* 5. 链接交互 */
.zob-list-nav .breadcrumb-item a {
  color: var(--bs-heading-color, #212529);
  transition: color 0.2s ease;
}

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

/* =========================================================
   暗黑模式适配 (Dark Mode)
========================================================= */

[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 a {
  color: #e2e8f0;
}

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

[data-bs-theme="dark"] .zob-list-nav .breadcrumb-item.active {
  color: #94a3b8; 
}
/* =========================================================
   14. 页脚基础（ZOB Footer · 文案 + 间距 + 二维码尺寸）
   - 统一 footer 里的文字颜色 / 边框色变量
   - CTA 行 gutter / 最大宽度 / 居中
   - 标题 / 说明 / 小按钮尺寸
   - Newsletter 表单排版
   - 二维码 img 尺寸 / 边框 / 阴影
   - 法务条上下留白
========================================================= */

#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);
}

/* CTA 行：列间距 + 最大宽度 + 居中 */
#site-footer.zob-footer .zf-cta-row {
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
  max-width: 100%;
  margin-inline: auto;
}

/* 标题/说明/按钮尺寸（ZOB 风格） */
#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;
}

/* Newsletter 表单（若短代码输出表单） */
#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 !重要; padding-bottom: .5rem !important; }

/* =========================================================
   15. 页脚 CTA（联系客服 + 二维码 · 二次元背景版 v2）
   - 左：二次元客服背景 + 渐变遮罩
   - 右：二次元扫码背景 + 二维码呼吸光晕
   - 移动端单列，桌面两列等高
========================================================= */

/* 列：用 flex 让内部卡片自动等高（Bootstrap col 上再包一层） */
.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);
}

/* 卡片内容主体 flex */
.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;
}

/* CTA 按钮：胶囊形 + 蓝色阴影 */
.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);
}

/* =========================================================
   15.1 左卡片：联系客服 · 二次元客服背景
========================================================= */

/* ⚠ 将 url(...) 修改为你真实的 SVG 路径 */
.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;
}

/* =========================================================
   15.2 右卡片：二维码 · 二次元“扫一扫”背景
========================================================= */

/* ⚠ 将 url(...) 修改为你真实的 SVG 路径 */
.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;
}

/* 二维码图片本体：
   - 真正尺寸由 #site-footer #zf-qr-inline 控制
   - 这里作为兜底，方便后续复用 .zf-qr-img */
.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); }
}

/* =========================================================
   15.3 CTA 响应式微调
========================================================= */

@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、联系页面表单样式 (全模式适配) ========== */

/* 1. 表单组容器 */
#contact-form .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);
}

#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%);
}

/* 2. Addon 标签样式 */
#contact-form .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: 110px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

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

/* 3. 输入框交互 */
#contact-form .zob-interactive-input {
    border: none !important;
    background: transparent !important;
    padding: 0.6rem 0.75rem !important;
    box-shadow: none !important;
    color: var(--text);
}

/* 4. 留言区域卡片容器 */
.zob-contact-editor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.3s 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-textarea {
    resize: vertical;
    min-height: 140px;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem !important;
    color: var(--text);
    width: 100%;
}

/* ========== 🌙 黑暗模式 (Dark Mode) 深度优化 ========== */

[data-bs-theme="dark"] #contact-form .input-group,
[data-bs-theme="dark"] .zob-contact-editor-card {
    /* 确保黑暗模式下背景也是基于变量，而不是强制白色 */
    background: var(--surface); 
    border-color: var(--border);
}

[data-bs-theme="dark"] #contact-form .zob-custom-addon {
    /* 黑暗模式下 Addon 标签颜色微调，增加对比度 */
    background: color-mix(in srgb, var(--surface) 85%, #fff 15%) !important;
    border-right-color: var(--border) !important;
}

[data-bs-theme="dark"] #contact-form .zob-interactive-input,
[data-bs-theme="dark"] .zob-contact-textarea {
    /* 确保输入文字在黑暗模式下是明亮的 */
    color: var(--text) !important;
}

[data-bs-theme="dark"] #contact-form .zob-interactive-input::placeholder,
[data-bs-theme="dark"] .zob-contact-textarea::placeholder {
    /* 占位符颜色调整，避免太深看不清 */
    color: var(--muted);
}

/* ========== 17、产品页面适配 ========== */
/* =========================================================
   ZOB 产品分类页 / 产品卡片增强样式
   适用：taxonomy-product_cat.php / archive-product.php / 标签产品卡片
   ========================================================= */


/* ------------------------------
   产品分类页头部：紧凑版
------------------------------ */

.zob-product-tax-head {
  position: relative;
  overflow: hidden;
  border-color: var(--bs-border-color) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), .08), transparent 36%),
    var(--bs-body-bg);
}

.zob-product-tax-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--bs-primary);
  opacity: .9;
}

.zob-product-tax-main {
  position: relative;
  z-index: 1;
}

.zob-product-tax-main .min-w-0 {
  min-width: 0;
}

.zob-product-tax-label {
  line-height: 1.2;
}

.zob-product-tax-title {
  max-width: 100%;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.zob-product-tax-count {
  padding: .42rem .72rem;
  font-weight: 600;
  box-shadow: 0 .35rem .8rem rgba(var(--bs-primary-rgb), .18);
}

.zob-product-tax-desc {
  max-width: 760px;
  line-height: 1.65;
}

.zob-product-tax-desc p {
  margin-bottom: .35rem;
}

.zob-product-tax-desc p:last-child {
  margin-bottom: 0;
}


/* ------------------------------
   下级产品分类：紧凑胶囊版
------------------------------ */

.zob-product-subcats {
  border-color: var(--bs-border-color) !important;
}

.zob-product-subcats-label {
  line-height: 1;
  white-space: nowrap;
}

.zob-product-subcat-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .28rem .62rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  transition:
    color .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.zob-product-subcat-link:hover {
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .45);
  background-color: rgba(var(--bs-primary-rgb), .08);
  transform: translateY(-1px);
}

.zob-product-subcat-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zob-product-subcat-link em {
  min-width: 1.35rem;
  padding: .05rem .36rem;
  font-style: normal;
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  border-radius: 999px;
}


/* ------------------------------
   产品卡片基础
------------------------------ */

.zob-product-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--bs-border-color) !important;
  background-color: var(--bs-body-bg);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.zob-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--bs-primary-rgb), .28) !important;
  box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .08) !important;
}

.zob-product-card:focus-within {
  border-color: rgba(var(--bs-primary-rgb), .5) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12) !important;
}


/* ------------------------------
   产品图片
------------------------------ */

.zob-product-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--bs-secondary-rgb), .08), rgba(var(--bs-secondary-rgb), .02)),
    var(--bs-tertiary-bg);
}

.zob-product-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 58%,
    rgba(0, 0, 0, .08)
  );
  opacity: 0;
  transition: opacity .22s ease;
}

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

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

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

.zob-product-thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  color: var(--bs-secondary-color);
  background:
    radial-gradient(circle at center, rgba(var(--bs-primary-rgb), .08), transparent 42%),
    var(--bs-tertiary-bg);
}


/* ------------------------------
   产品分类文字
------------------------------ */

.zob-product-cats {
  min-height: 1.25rem;
}

.zob-product-cats a {
  transition: color .15s ease;
}

.zob-product-cats a:hover {
  color: var(--bs-primary) !important;
}


/* ------------------------------
   产品标题
------------------------------ */

.zob-product-title {
  line-height: 1.45;
  letter-spacing: -.01em;
}

.zob-product-title a {
  display: -webkit-box;
  min-height: 2.9em;
  color: var(--bs-body-color);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}

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


/* ------------------------------
   产品摘要
------------------------------ */

.zob-product-excerpt {
  line-height: 1.68;
  color: var(--bs-secondary-color);
  display: -webkit-box;
  min-height: 3.35em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ------------------------------
   产品价格 / 库存
------------------------------ */

.zob-product-meta {
  padding-top: .75rem;
  border-top: 1px dashed var(--bs-border-color);
}

.zob-product-price {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--bs-danger);
  word-break: break-word;
}

.zob-product-stock .badge {
  font-weight: 500;
  padding: .42rem .65rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}


/* ------------------------------
   产品按钮
------------------------------ */

.zob-product-card .card-footer .btn {
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 .35rem .8rem rgba(var(--bs-primary-rgb), .18);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    border-color .15s ease;
}

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

.zob-product-card .card-footer .btn:active {
  transform: translateY(0);
  box-shadow: 0 .25rem .55rem rgba(var(--bs-primary-rgb), .2);
}


/* ------------------------------
   空产品状态
------------------------------ */

.zob-empty-products {
  border-color: var(--bs-border-color) !important;
  background:
    radial-gradient(circle at top, rgba(var(--bs-primary-rgb), .08), transparent 36%),
    var(--bs-body-bg);
}

.zob-empty-products .bi {
  opacity: .75;
}


/* ------------------------------
   深色模式增强
------------------------------ */

[data-bs-theme="dark"] .zob-product-tax-head {
  background:
    radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), .14), transparent 40%),
    var(--bs-body-bg);
}

[data-bs-theme="dark"] .zob-product-tax-count {
  box-shadow: 0 .35rem .8rem rgba(0, 0, 0, .28);
}

[data-bs-theme="dark"] .zob-product-subcat-link {
  background-color: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .09);
}

[data-bs-theme="dark"] .zob-product-subcat-link:hover {
  background-color: rgba(var(--bs-primary-rgb), .14);
  border-color: rgba(var(--bs-primary-rgb), .42);
}

[data-bs-theme="dark"] .zob-product-subcat-link em {
  background-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .zob-product-card {
  background-color: var(--bs-body-bg);
  border-color: rgba(255, 255, 255, .09) !important;
}

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

[data-bs-theme="dark"] .zob-product-thumb {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)),
    var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .zob-product-thumb::after {
  background: linear-gradient(
    to bottom,
    transparent 52%,
    rgba(0, 0, 0, .32)
  );
}

[data-bs-theme="dark"] .zob-product-thumb-placeholder {
  background:
    radial-gradient(circle at center, rgba(var(--bs-primary-rgb), .12), transparent 42%),
    var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .zob-product-card .card-footer .btn {
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .28);
}

[data-bs-theme="dark"] .zob-product-card .card-footer .btn:hover {
  box-shadow: 0 .55rem 1.15rem rgba(0, 0, 0, .36);
}


/* ------------------------------
   可访问性：键盘焦点
------------------------------ */

.zob-product-card a:focus-visible,
.zob-product-subcat-link:focus-visible,
.zob-empty-products a:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), .75);
  outline-offset: 3px;
  border-radius: .75rem;
}


/* ------------------------------
   减少动画偏好
------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .zob-product-card,
  .zob-product-img,
  .zob-product-thumb::after,
  .zob-product-card .card-footer .btn,
  .zob-product-subcat-link {
    transition: none;
  }

  .zob-product-card:hover,
  .zob-product-card .card-footer .btn:hover,
  .zob-product-subcat-link:hover {
    transform: none;
  }

  .zob-product-card:hover .zob-product-img {
    transform: none;
  }
}


/* ------------------------------
   平板适配
------------------------------ */

@media (max-width: 991.98px) {
  .zob-product-tax-head {
    border-radius: 1rem !important;
  }

  .zob-product-title a {
    min-height: auto;
  }

  .zob-product-excerpt {
    min-height: auto;
  }
}


/* ------------------------------
   手机适配
------------------------------ */

@media (max-width: 575.98px) {
  .zob-product-tax-head {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  .zob-product-tax-title {
    font-size: 1.1rem;
  }

  .zob-product-tax-count {
    padding: .36rem .58rem;
    font-size: .75rem;
  }

  .zob-product-subcats {
    gap: .4rem !important;
  }

  .zob-product-subcats-label {
    width: 100%;
    margin-bottom: .1rem;
  }

  .zob-product-subcat-link {
    padding: .26rem .55rem;
    font-size: .78rem;
  }

  .zob-product-thumb {
    aspect-ratio: 16 / 10;
  }

  .zob-product-thumb-placeholder {
    min-height: 160px;
  }

  .zob-product-card {
    border-radius: 1rem !important;
  }

  .zob-product-card:hover {
    transform: none;
  }

  .zob-product-meta {
    align-items: flex-start !important;
  }

  .zob-product-price {
    font-size: .98rem;
  }

  .zob-product-stock .badge {
    padding: .36rem .58rem;
  }

  .zob-product-card .card-footer .btn {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}