/* ============================================================
   OneNav 全站视觉精修（子主题 ochild-refine.css）
   覆盖范围：首页布局 / 网址卡片 / 详情页排版 / 侧边栏小工具
   原则：仅视觉美化与信息清晰度优化，不改动任何结构与功能逻辑
   ============================================================ */

/* ============================================================
   一、全局质感与排版基础
   ============================================================ */

/* 更精致的滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-color) / 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-color) / 0.35);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-color) / 0.55);
}

/* 正文渲染优化：抗锯齿，文字更锐利清晰 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 主要正文文字：提升对比度，信息更清晰易读 */
.home-container .posts-item .item-title,
.site-content .panel-body.single,
.sidebar-tools .card-body {
  color: hsl(var(--main-color));
}

/* 次要/辅助文字：明确层级，弱化但不丢失可读性 */
.posts-item .item-meta,
.posts-item .meta-ico,
.posts-item .item-tags,
.sidebar-tools .text-muted,
.site-content .text-muted {
  color: hsl(var(--muted-color2));
}

/* 网址卡片摘要：保持清晰可读，仅做轻微层级区分 */
.posts-item.sites-item .item-body .line1 {
  color: hsl(var(--muted-color2));
  opacity: 1;
}

/* 链接默认态：去除模糊感，边界更清晰 */
a[href] {
  text-decoration: none;
}

/* 输入框与表单：聚焦态更清晰 */
.form-control:focus {
  outline: none;
}

/* ============================================================
   二、首页布局精修
   ============================================================ */

/* 内容模块间距更舒展 */
.home-container .content-layout {
  gap: 0.25rem;
}

/* 分类卡片区块：更柔和的呼吸感 */
.home-container .content-card {
  transition: transform 0.35s ease;
}

/* 分类 tab 容器：更精致的圆角与内边距 */
.home-container .slider-tab {
  border-radius: var(--theme-border-radius-md);
  box-shadow: inset 0 1px 2px hsl(var(--main-color) / 0.04);
}

/* tab item：更顺滑的过渡与选中态 */
.home-container .slider-tab .tab-item {
  border-radius: var(--theme-border-radius-sm);
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* 更多(more+) 链接：更克制的引导 */
.home-container .btn-more {
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.home-container .content-card:hover .btn-more {
  opacity: 1;
}

/* ============================================================
   三、网址卡片（sites-item）精修
   ============================================================ */

/* 卡片整体：更细腻的阴影与悬停抬升 */
.posts-item.sites-item {
  border-radius: var(--theme-border-radius);
  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.posts-item.sites-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px hsl(var(--main-color) / 0.22),
              inset 0 0 0 1px hsl(var(--focus-color) / 0.08);
}

/* 站点摘要：清晰可读的次要文字 */

/* Logo 图标：更圆润精致的容器 */
.posts-item.sites-item .item-media {
  border-radius: 12px;
  box-shadow: 0 2px 8px -4px hsl(var(--main-color) / 0.25);
}

/* Logo 图标清晰度优化：
   父主题默认对图标常驻 scale(1.05) 放大，40px 容器非整数重采样导致模糊；
   改为默认 1:1 精确渲染，悬停再轻微缩小（缩小方向模糊感远低于放大） */
.posts-item.sites-item .item-media img.sites-icon {
  transform: none;                             /* 默认 1:1 渲染，消除放大重采样模糊 */
  image-rendering: -webkit-optimize-contrast;  /* 小图标降采样边缘更锐利 */
  backface-visibility: hidden;                 /* 修正部分浏览器变换渲染模糊 */
}

.posts-item.sites-item:hover .item-media img.sites-icon {
  transform: scale(0.93);                      /* 悬停轻缩反馈，默认态保持清晰 */
}

/* 直达按钮：更柔和的显隐 */
.sites-item .togo {
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s ease;
}

/* max 模式：标签栏分隔线更精致 */
.sites-item.style-sites-max .sites-tags::before {
  background: hsl(var(--muted-color) / 0.12);
}

/* ============================================================
   四、详情页（single-sites / single）排版精修
   ============================================================ */

/* 面包屑：更克制的次要信息 */
.single .breadcrumb,
.site-content + * .breadcrumb {
  opacity: 0.85;
}

/* 详情正文卡片：更舒适的留白 */
.site-content .panel-body.single {
  line-height: 1.75;
  color: hsl(var(--main-color) / 0.9);
}

.site-content .panel-body.single p {
  margin-bottom: 1.1em;
}

/* 网站预览图容器：更精致的边框与阴影 */
.sites-preview .preview-body {
  border-radius: var(--theme-border-radius);
  box-shadow: 0 8px 24px -12px hsl(var(--main-color) / 0.25);
  border: 1px solid hsl(var(--muted-color) / 0.08);
}

.sites-preview .site-img {
  border-radius: var(--theme-border-radius-md);
  border: 1px solid hsl(var(--muted-color) / 0.08);
}

/* 打开网站按钮：更精致的质感 */
.preview-btn {
  box-shadow: 0 6px 16px -6px var(--focus-shadow-color);
}

/* ============================================================
   五、侧边栏小工具（sidebar-tools）精修
   ============================================================ */

/* 侧边栏卡片：更柔和的阴影与圆角 */
.sidebar-tools .card {
  border-radius: var(--theme-border-radius);
  box-shadow: 0 4px 16px -8px hsl(var(--main-color) / 0.18);
  transition: box-shadow 0.3s ease;
}

.sidebar-tools .card:hover {
  box-shadow: 0 8px 20px -8px hsl(var(--main-color) / 0.24);
}

/* 侧边栏链接：更顺滑的悬停 */
.sidebar-tools a {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* 左侧 aside 导航：更精致的悬停 */
.aside-btn {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.aside-card {
  box-shadow: 0 4px 16px -8px hsl(var(--main-color) / 0.15);
}

/* ============================================================
   六、通用卡片与按钮质感
   ============================================================ */

/* 通用卡片：更细腻的阴影层次 */
.card {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 主题按钮：更精致的阴影 */
.btn.vc-theme,
.btn-outline-primary {
  transition: box-shadow 0.25s ease, transform 0.15s ease, background-color 0.25s ease;
}

.btn.vc-theme:hover,
.btn-outline-primary:hover {
  box-shadow: 0 8px 18px -8px var(--focus-shadow-color);
}

/* 链接 hover：更柔和的过渡 */
a[href] {
  transition: color 0.2s ease;
}

/* ============================================================
   七、暗色模式适配
   ============================================================ */

.io-black-mode .posts-item.sites-item:hover {
  box-shadow: 0 12px 24px -12px hsl(0 0% 0% / 0.5),
              inset 0 0 0 1px hsl(var(--focus-color) / 0.12);
}

.io-black-mode .sidebar-tools .card,
.io-black-mode .sites-preview .preview-body {
  box-shadow: 0 4px 16px -8px hsl(0 0% 0% / 0.4);
}

.io-black-mode .posts-item.sites-item .item-media {
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / 0.5);
}

/* ============================================================
   八、减少动画模式适配
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .posts-item.sites-item,
  .posts-item.sites-item:hover,
  .sidebar-tools .card,
  .btn.vc-theme,
  .btn-outline-primary {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   九、分类页子分类容器背景：与首页分类 tab 统一为渐变玻璃卡片质感
   结构：.taxonomy-selects > .cat-selects-sub > .cat-selects > a.cat-select
   注意：选择器挂 .taxonomy-selects 提升特异度至 0,2,0，稳定覆盖父主题灰底。
   仅改背景/边框/阴影质感，padding 保持父主题原值 10px，按钮尺寸与选中态不动。
   ============================================================ */
.taxonomy-selects .cat-selects-sub {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 245, 248, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 2px 12px -8px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.io-black-mode .taxonomy-selects .cat-selects-sub {
  background: linear-gradient(135deg, rgba(58, 62, 67, 0.55), rgba(41, 43, 46, 0.45));
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 12px -8px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   十、首页分类 tab 边框容器美化：灰色底升级为渐变玻璃卡片
   结构：.io-slider-tab > .slider-tab > .tab-item(.active)
   注意：父主题 main.css 在子主题之后加载，选择器挂 .io-slider-tab
   提升特异度至 0,2,0，稳定覆盖父主题的灰色底。
   ============================================================ */

/* 边框容器：磨砂渐变卡片质感（覆盖父主题 var(--muted-bg-color) 灰底） */
.io-slider-tab .slider-tab {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 245, 248, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 2px 12px -8px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px;
}

/* tab 按钮：顺滑过渡（悬停态沿用父主题原始白底，不覆盖） */
.io-slider-tab .slider-tab .tab-item {
  transition: color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* 激活态：主题色实心胶囊 + 白字 + 同色柔光投影（父主题仅设白字，这里补背景与阴影） */
.io-slider-tab .slider-tab .tab-item.active {
  background: var(--theme-color);
  color: #fff;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--theme-color) 55%, transparent);
}

/* —— 暗色模式：深色抬升表面 —— */
.io-black-mode .io-slider-tab .slider-tab {
  background: linear-gradient(135deg, rgba(58, 62, 67, 0.55), rgba(41, 43, 46, 0.45));
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 12px -8px rgba(0, 0, 0, 0.55);
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .io-slider-tab .slider-tab .tab-item {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   十一、热门推荐模块（.auto-ad-url）重新美化
   出现位置：首页顶部、详情页顶部。结构：
   .auto-ad-url > .card
     > .card-head ( icon-hot + "热门推荐" + .btn 立即入驻 )
     > .auto-ad-body.posts-row > .auto-url-list ( .auto-ad-img + .auto-ad-name )
   父主题已有：圆角、悬停投影、骨架动画。
   增强：顶部主题色装饰条 + 标题渐变药丸 + 列表项精致悬停 + 图标放大。
   ============================================================ */

/* 卡片：玻璃化质感 + 更柔和投影 */
.auto-ad-url .card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 245, 248, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 2px 14px -10px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 标题栏：图标渐变药丸 + 标题层次排版 */
.auto-ad-url .card-head .text-sm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--main-color);
}
.auto-ad-url .card-head .text-sm .icon-hot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 0;
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 65%, #ff8a65));
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--theme-color) 55%, transparent);
}

/* 列表项：圆角 + 过渡 + 悬停主题色高亮 + 轻微上浮 + 图标放大 */
.auto-ad-url .auto-url-list {
  transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.auto-ad-url .auto-url-list:hover {
  background: rgba(99, 102, 241, 0.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.auto-ad-url .auto-url-list:hover .auto-ad-img {
  transform: scale(1.12);
}
.auto-ad-url .auto-url-list:hover .auto-ad-name {
  color: var(--theme-color);
}

/* 卡片线框：按 .auto-list-N 序号分配 10 色彩色边框（取自热搜榜卡片配色）
   真实结构：.auto-ad-body > .auto-list.auto-list-N > a.auto-url-list.on-border
   注意：父主题 .on-border 用 border-width:0 !important 强制无边框，必须用 !important 对抗 */
.auto-ad-url .auto-list-1  .auto-url-list { border: 1px solid #f9c74f !important; }
.auto-ad-url .auto-list-2  .auto-url-list { border: 1px solid #38c172 !important; }
.auto-ad-url .auto-list-3  .auto-url-list { border: 1px solid #ef4444 !important; }
.auto-ad-url .auto-list-4  .auto-url-list { border: 1px solid #3b82f6 !important; }
.auto-ad-url .auto-list-5  .auto-url-list { border: 1px solid #fb923c !important; }
.auto-ad-url .auto-list-6  .auto-url-list { border: 1px solid #9333ea !important; }
.auto-ad-url .auto-list-7  .auto-url-list { border: 1px solid #14b8a6 !important; }
.auto-ad-url .auto-list-8  .auto-url-list { border: 1px solid #f97316 !important; }
.auto-ad-url .auto-list-9  .auto-url-list { border: 1px solid #eab308 !important; }
.auto-ad-url .auto-list-10 .auto-url-list { border: 1px solid #22c55e !important; }

/* 推荐图标：圆角兜底底色 + 放大过渡 */
.auto-ad-url .auto-ad-img {
  border-radius: 6px;
  background: var(--muted-bg-a-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.22s ease;
}

/* 推荐名称：过渡 */
.auto-ad-url .auto-ad-name {
  transition: color 0.22s ease;
}

/* 暗色模式：卡片深色玻璃 + 图标兜底底色加深 */
.io-black-mode .auto-ad-url .card {
  background: linear-gradient(135deg, rgba(58, 62, 67, 0.55), rgba(41, 43, 46, 0.45));
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 14px -10px rgba(0, 0, 0, 0.55);
}
.io-black-mode .auto-ad-url .auto-ad-img {
  background: rgba(255, 255, 255, 0.08);
}