/**
 * Zibll 网址导航详情页 CSS —— 精简版（最大程度复用 Zibll 主题 main.css）
 *
 * 【核心原则】
 *  1. 能交给 Zibll 管的绝不自己写：
 *     - 正文 p/h1~h6/li/blockquote/code/pre → 外层套 .article-content 由 Zibll main.css 负责
 *       （含首行缩进、段距、行高、代码块样式、链接主题色、body.dark-theme 下的颜色自动切换）
 *     - 卡片 panel/card 基础色/圆角/shadow → 直接用 Zibll .card.panel 类 + --muted-bg-2-color 变量
 *  2. OneNav 独有的、Zibll 主题没有的功能保留：
 *     - VC 变量体系 + 20 个颜色类（vc-theme / vc-l-*）
 *     - SEO 权重块 (sites-weight 52×18 + 5 张 SVG 品牌背景 + loading 骨架屏动画)
 *     - site-go 三件套按钮 (btn-i-r 右侧图标滑入动画 / qrcode 左图右字间距)
 *     - 右侧 sites-preview 预览卡 (site-favicon + img-sites 渐变遮罩 + preview-btn 悬浮胶囊)
 *     - terms-list 标签胶囊 (33% flex 网格 + hover 上浮)
 *     - 面包屑导航 (OneNav 风格 › 分隔符 + 末项加粗 + 统一灰色 hover 主题红)
 *     - 点赞/收藏按钮 (.io-posts-like 的 actived/liked 态)
 *  3. 颜色/边框/背景：不硬编码 #fff/#1f2937，全部引用 Zibll 原生变量
 *     - --main-color / --muted-color / --muted-2-color
 *     - --main-bg-color / --muted-bg-color / --muted-bg-2-color / --muted-border-color
 *     - 暗黑模式：body.dark-theme 下 Zibll 自动覆写上述同名变量，我们只覆盖 OneNav 独有组件
 *  4. 暗黑前缀：用 Zibll 实际挂在 body 上的 .dark-theme，而非错误的 .dark-mode
 */

/* =========================================
   0. VC 变量体系 (OneNav L8531-L8665 原版 1:1 保留，因为是导航特有功能)
   ========================================= */
:root {
    --wzw-btn-color:       var(--main-bg-color, #ffe7eb);
    --wzw-btn-hover-color: #ffffff;
    --wzw-btn-bg:          var(--theme-color, #f1404b);
    --wzw-btn-hover-bg:    #e4415f;
    --wzw-btn-shadow-bg:   rgba(219, 31, 66, 0.7);
    --focus-color:        var(--theme-color, #f1404b);
}

/* 通用 btn / badge (OneNav L1978) */
.btn,
.badge {
    color: var(--this-color);
    background: var(--this-bg);
    border: 1px solid var(--this-border);
    box-shadow: var(--this-shadow);
    transition: .2s;
    --this-color:   var(--muted-color, #666);
    --this-bg:      rgba(136,136,136,.1);
    --this-border:  transparent;
    --this-shadow:  none;
    --this-shadow-bg: transparent;
    --this-hover-color: var(--main-color, #444);
    --this-hover-bg:    rgba(136,136,136,.2);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    user-select: none;
    box-sizing: border-box;
}
.btn:focus,
.btn:hover,
.btn.active {
    color: var(--this-hover-color);
    background: var(--this-hover-bg);
    border-color: var(--this-border);
    text-decoration: none !important;
    outline: none;
}
.btn:active {
    --this-shadow: inset 0 2px 3px rgba(0,0,0,.08);
}
.badge {
    font-weight: normal;
    line-height: 1.2;
    padding: 1px 5px;
    border-radius: 50px;
}

/* btn-shadow (OneNav L2020) */
.btn-shadow {
    --this-shadow: 0px 12px 20px -8px var(--this-shadow-bg);
}
.btn-shadow:focus,
.btn-shadow:hover {
    --this-shadow: 0px 2px 10px 0px transparent;
}
.btn-shadow[class*="vc-l-"],
.btn-shadow.btn-outline {
    --this-shadow: 0px 5px 20px -3px transparent;
}
.btn-shadow[class*="vc-l-"]:focus,
.btn-shadow[class*="vc-l-"]:hover,
.btn-shadow.btn-outline:not(.badge):focus,
.btn-shadow.btn-outline:not(.badge):hover {
    --this-shadow: 0px 2px 10px 0px var(--this-shadow-bg);
}
.btn-shadow.btn-outline[class*="vc-l-"]:not(.badge):focus,
.btn-shadow.btn-outline[class*="vc-l-"]:not(.badge):hover {
    color: var(--this-hover-color);
    background: var(--this-hover-bg);
    --this-shadow: 0px 2px 10px 0px var(--this-shadow-bg);
}

/* btn-outline (OneNav L2048) */
.btn-outline {
    color: var(--this-bg);
    background: transparent;
    --this-border: var(--this-bg);
}
.btn-outline:not(.badge):focus,
.btn-outline:not(.badge):hover {
    color: var(--this-hover-color);
    background: var(--this-bg);
}
.btn-outline[class*="vc-l-"] {
    color: var(--this-color);
    background: transparent;
    --this-border: var(--this-color);
}
.btn-outline:not(.badge):focus[class*="vc-l-"],
.btn-outline:not(.badge):hover[class*="vc-l-"] {
    color: var(--this-color);
    background: var(--this-bg);
    --this-border: transparent;
}

/* ===== 所有 VC 颜色类 (OneNav L8531-L8665 原版 1:1) ===== */
.vc-theme {
    --this-color:       var(--wzw-btn-color);
    --this-hover-color: var(--wzw-btn-hover-color);
    --this-bg:          var(--wzw-btn-bg);
    --this-hover-bg:    var(--wzw-btn-hover-bg);
    --this-shadow-bg:   var(--wzw-btn-shadow-bg);
}
.vc-white {
    --this-color: var(--main-color, #343638); --this-hover-color: #131416;
    --this-bg: var(--main-bg-color, #ffffff); --this-hover-bg: #eeeeee;
    --this-shadow-bg: rgba(0,0,0,0.7);
}
.vc-gray {
    --this-color: #dbe7f3; --this-hover-color: #ffffff;
    --this-bg: #818b95;    --this-hover-bg: #656f79;
    --this-shadow-bg: rgba(74,82,91,0.7);
}
.vc-red {
    --this-color: var(--wzw-btn-color, #ffe7eb);
    --this-hover-color: #ffffff;
    --this-bg:    var(--theme-color, #f1404b);
    --this-hover-bg: #e4415f;
    --this-shadow-bg: rgba(219, 31, 66, 0.7);
}
.vc-yellow {
    --this-color: #fff6f0; --this-hover-color: #ffffff;
    --this-bg: #ff6f06;    --this-hover-bg: #d2691e;
    --this-shadow-bg: rgba(211,103,27,0.7);
}
.vc-cyan {
    --this-color: #d9fffe; --this-hover-color: #ffffff;
    --this-bg: #08c4c1;    --this-hover-bg: #0f9997;
    --this-shadow-bg: rgba(22,183,180,0.7);
}
.vc-blue {
    --this-color: #daeeff; --this-hover-color: #ffffff;
    --this-bg: #2997f7;    --this-hover-bg: #237ece;
    --this-shadow-bg: hsla(208, 77%, 45%, 0.7);
}
.vc-violet {
    --this-color: #dde4ff; --this-hover-color: #ffffff;
    --this-bg: #5c7cff;    --this-hover-bg: #516bd4;
    --this-shadow-bg: rgba(79,104,203,0.7);
}
.vc-violet2 {
    --this-color: #e4ddff; --this-hover-color: #ffffff;
    --this-bg: #955cff;    --this-hover-bg: #8151d4;
    --this-shadow-bg: rgba(118,79,203,0.7);
}
.vc-black {
    --this-color: #eee;    --this-hover-color: #ffffff;
    --this-bg: #343a40;    --this-hover-bg: #25272a;
    --this-shadow-bg: rgba(40,45,50,0.7);
}
/* ---- vc-l-* 浅色填充 ---- */
.vc-l-gray {
    --this-color: #818b95;
    --this-hover-color: #ffffff;
    --this-bg: rgba(129,139,149,0.1);
    --this-hover-bg: #818b95;
    --this-shadow-bg: rgba(74,82,91,0.7);
}
.vc-l-red {
    --this-color: var(--theme-color, #f1404b);
    --this-hover-color: #ffffff;
    --this-bg: rgba(255, 84, 115, 0.1);
    --this-hover-bg: var(--theme-color, #f1404b);
    --this-shadow-bg: rgba(207, 56, 84, 0.7);
}
.vc-l-yellow {
    --this-color: #ff6f06;
    --this-hover-color: #ffffff;
    --this-bg: rgba(255,110,6,0.1);
    --this-hover-bg: #ff6f06;
    --this-shadow-bg: rgba(211,103,27,0.7);
}
.vc-l-cyan {
    --this-color: #08c4c1;
    --this-hover-color: #ffffff;
    --this-bg: rgba(8,196,193,0.1);
    --this-hover-bg: #08c4c1;
    --this-shadow-bg: rgba(22,183,180,0.7);
}
.vc-l-blue {
    --this-color: #2997f7;
    --this-hover-color: #ffffff;
    --this-bg: rgba(41,151,247,0.1);
    --this-hover-bg: #2997f7;
    --this-shadow-bg: hsla(208, 77%, 45%, 0.7);
}
.vc-l-violet {
    --this-color: #5c7cff;
    --this-hover-color: #ffffff;
    --this-bg: rgba(92,125,255,0.1);
    --this-hover-bg: #5c7cff;
    --this-shadow-bg: rgba(79,104,203,0.7);
}
.vc-l-violet2 {
    --this-color: #955cff;
    --this-hover-color: #ffffff;
    --this-bg: rgba(149,92,255,0.1);
    --this-hover-bg: #955cff;
    --this-shadow-bg: rgba(118,79,203,0.7);
}
.vc-l-orange {
    --this-color: #ff7a00;
    --this-hover-color: #ffffff;
    --this-bg: rgba(255,122,0,.1);
    --this-hover-bg: #ff7a00;
    --this-shadow-bg: rgba(229,115,30,0.7);
}
.vc-l-purple {
    --this-color: #8b5cf6;
    --this-hover-color: #ffffff;
    --this-bg: rgba(139, 92, 246, .1);
    --this-hover-bg: #8b5cf6;
    --this-shadow-bg: rgba(124, 58, 237, 0.7);
}
.vc-l-pink {
    --this-color: #ec4899;
    --this-hover-color: #ffffff;
    --this-bg: rgba(236, 72, 153, .1);
    --this-hover-bg: #ec4899;
    --this-shadow-bg: rgba(219, 39, 119, 0.7);
}
.vc-l-theme {
    --this-color: var(--wzw-btn-bg);
    --this-hover-color: #ffffff;
    --this-bg: rgba(241, 64, 75, .1);
    --this-hover-bg: var(--wzw-btn-bg);
    --this-shadow-bg: var(--wzw-btn-shadow-bg);
}

/* 工具类：绝对 px 单位避免 Zibll 改 html font-size 基准 */
.text-height-xs { line-height: 1 !important; }
.rounded-pill   { border-radius: 9999px !important; }
.btn-sm         { padding: 3px 10px !important; font-size: 13px !important; }
.text-xs        { font-size: 12px !important; }
.text-md        { font-size: 15px !important; }
.py-1           { padding-top: 4px !important; padding-bottom: 4px !important; }
.px-4           { padding-left: 24px !important; padding-right: 24px !important; }
.m-1            { margin: 4px !important; }
.mr-2           { margin-right: 8px !important; }
.ml-0           { margin-left: 0 !important; }
.mt-3           { margin-top: 12px !important; }
.mb-4           { margin-bottom: 16px !important; }
@media (min-width: 768px) {
    .ml-md-2 { margin-left: 8px !important; }
    .mt-md-0 { margin-top: 0 !important; }
    .mb-md-5 { margin-bottom: 48px !important; }
}
.text-sm { font-size: 14px !important; }
.text-lg { font-size: 18px !important; }
.icon-lg { font-size: 18px; line-height: 0.75em; vertical-align: -15%; }

/* =========================================
   0.5 全局 SVG 图标尺寸（Zibll SVG sprite + <use>）—— OneNav 结构需要
   ========================================= */
svg.icon,
.site-content .icon,
.site-body .icon,
.site-name-box .icon,
.table-div .icon,
.posts-like .icon,
.io-posts-like .icon,
.site-go .icon,
.terms-list .icon,
.panel.site-content .icon,
.content-title .icon,
.url-body .icon,
.zsn-breadcrumb .icon,
.meta-time .icon,
.meta-view .icon,
.meta-comm .icon {
    width: 1em !important;
    height: 1em !important;
    vertical-align: -2px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 0;
    display: inline-block !important;
    margin-right: 4px;
    flex-shrink: 0;
    color: inherit;
}
svg.icon > use {
    fill: currentColor;
    stroke: currentColor;
    color: inherit;
}
.io-posts-like .star-count + .icon,
.io-posts-like .icon + .star-count,
.io-posts-like .icon.icon-lg {
    margin-right: 0;
    margin-left: 0;
}

/* =========================================
   0.6 面包屑导航（OneNav 风格：首页 › 分类 › 末项）—— OneNav 独有，Zibll 面包屑结构不同
   ========================================= */
.zsn-breadcrumb {
    padding: 4px 2px 10px 2px;
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-2-color, #888);
    width: 100%;
    overflow: hidden;
    word-break: break-all;
}
.zsn-breadcrumb .crumb-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.zsn-breadcrumb a.crumb-link {
    color: var(--muted-2-color, #888) !important;
    text-decoration: none;
    transition: color .2s;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.zsn-breadcrumb a.crumb-link:hover,
.zsn-breadcrumb a.crumb-link:focus {
    color: var(--theme-color, #f1404b) !important;
    text-decoration: none;
}
.zsn-breadcrumb i.fa {
    font-size: 12px;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    font-style: normal;
    margin-right: 4px;
    color: inherit;
}
.zsn-breadcrumb i.fa-home { opacity: .9; }
.zsn-breadcrumb .crumb-sep {
    color: var(--muted-3-color, #b5b9c2);
    margin: 0 4px;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    display: inline-block;
    opacity: .95;
}
.zsn-breadcrumb .crumb-current {
    color: var(--main-color, #1f2937);
    font-weight: 500;
    opacity: 1;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    border-radius: 0 !important;
}
@media (max-width: 767px) {
    .zsn-breadcrumb { padding: 2px 2px 8px 2px; }
    .zsn-breadcrumb .crumb-sep { margin: 0 3px; }
}

/* =========================================
   1. 头部：zsn-detail-head 左文右图 Flex 结构（OneNav 独有布局）
   ========================================= */
.zsn-detail-head {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    margin-bottom: 1.5rem !important;
}
@media (min-width: 768px) {
    .zsn-detail-head {
        flex-direction: row !important;
        align-items: flex-start;
        margin-bottom: 3rem !important;
    }
}
.zsn-detail-head .site-body {
    flex: 1 1 auto !important;
    min-width: 0;
    width: 100%;
}
.zsn-detail-head .sites-preview {
    flex: 0 0 auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-top: 1rem !important;
}
@media (min-width: 768px) {
    .zsn-detail-head .sites-preview {
        flex: 0 0 420px !important;
        width: 420px !important;
        max-width: 420px !important;
        min-width: 420px !important;
        margin-left: .75rem !important;
        margin-top: 0 !important;
    }
}
@media (min-width: 992px) {
    .zsn-detail-head .sites-preview {
        flex: 0 0 456px !important;
        width: 456px !important;
        max-width: 456px !important;
        min-width: 456px !important;
    }
}
.zsn-detail-head .site-body .zsn-head-top {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.zsn-detail-head .site-body .zsn-head-top .site-name-box {
    flex: 1 1 auto !important;
    min-width: 0;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .zsn-detail-head .site-body .zsn-head-top .site-name-box {
        margin-bottom: 0;
        padding-right: 1rem;
    }
}
.zsn-detail-head .site-body .zsn-head-top .posts-like {
    align-self: flex-start;
    flex: 0 0 auto;
    padding-top: 4px;
}
.zsn-detail-head .site-name-box .zsn-meta-row {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1rem;
    color: var(--muted-color, #8c8f93) !important;
}
.zsn-detail-head .site-name-box .zsn-meta-row a,
.zsn-detail-head .site-name-box .zsn-meta-row a:hover {
    color: inherit;
}
.zsn-detail-head .zsn-meta-row > * {
    display: inline-flex;
    align-items: center;
}
.zsn-detail-head .zsn-meta-row .icon {
    width: 1em;
    height: 1em;
    margin-right: 4px;
    vertical-align: -2px;
    fill: currentColor;
    display: inline-block;
}

/* =========================================
   2. 左上：site-name-box（标题+元信息）
   ========================================= */
.site-name {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--main-color, #111);
    word-break: break-word;
    margin: 0;
}
.site-name.h3 { font-size: 24px; }
.site-name .badge {
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.site-name-box .d-flex.text-muted.text-sm {
    color: var(--muted-color, #8c8f93) !important;
}
.site-name-box .d-flex.text-muted.text-sm a,
.site-name-box .d-flex.text-muted.text-sm a:hover {
    color: inherit;
}
.smooth { scroll-behavior: smooth; }
.io-posts-like {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer;
    transition: color .2s;
    color: inherit;
    text-decoration: none !important;
    line-height: 1.5;
    padding: 2px 0;
}
.io-posts-like:hover { color: var(--theme-color, #f1404b); }
.io-posts-like .star-count {
    margin-left: 2px;
    font-weight: 500;
    opacity: .95;
    line-height: 1;
    font-size: 12px;
    vertical-align: baseline;
}
.io-posts-like svg.icon {
    width: 1em;
    height: 1em;
    margin-right: 4px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: -1px;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}
.io-posts-like svg.icon > use {
    fill: currentColor;
    stroke: currentColor;
}
.io-posts-like.liked,
.io-posts-like.actived {
    color: var(--theme-color, #f1404b) !important;
}
.io-posts-like .zsn-zib-raw,
.io-posts-like text,
.io-posts-like count {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
}
.io-posts-like.btn.vc-l-red.actived {
    background: var(--theme-color, #f1404b) !important;
    color: var(--main-bg-color, #ffffff) !important;
    border-color: transparent !important;
}
.io-posts-like.btn.vc-l-red.actived svg.icon {
    fill: var(--main-bg-color, #ffffff) !important;
    stroke: var(--main-bg-color, #ffffff) !important;
}
.io-posts-like.btn.vc-l-red.actived svg.icon > use {
    fill: var(--main-bg-color, #ffffff) !important;
    stroke: var(--main-bg-color, #ffffff) !important;
}
.io-posts-like .zsn-count-mirror {
    display: inline-block;
    transform: translateY(0);
}

/* =========================================
   3. table-div（收录时间）
   ========================================= */
.table-div {
    margin: 8px 0 0;
    padding: 4px 0;
}
.table-div .table-row {
    display: inline-flex;
    align-items: center;
}
.table-div .table-title {
    display: inline-flex;
    align-items: center;
    color: var(--muted-color, #8c8f93);
    font-size: 14px;
    margin-right: 4px;
}
.table-div .table-title .icon {
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -1px;
    opacity: .85;
}
.table-div .table-value {
    font-size: 14px;
}
.table-div .table-value strong {
    font-weight: 600;
    color: var(--main-color, #1f2937);
}

/* =========================================
   4. sites-seo-load + 5 块 sites-weight（OneNav 独有 SEO 品牌卡）
   ========================================= */
.sites-seo-load {
    margin: 8px 0 4px 0;
    line-height: 1;
}
.sites-weight {
    position: relative !important;
    display: inline-block !important;
    font-size: 14px !important;
    color: #ffffff !important;
    height: 18px !important;
    width: 52px !important;
    margin: 6px 5px 6px 0 !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.sites-weight:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}
.sites-weight span {
    position: absolute !important;
    right: 6px !important;
    top: 0 !important;
    line-height: 18px !important;
    width: 20px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .2px;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.15) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 Arial, sans-serif !important;
    display: inline-block !important;
}
.sites-weight.loading {
    border-radius: 4px;
    background-image: none !important;
    background: linear-gradient(115deg, rgba(121,121,121,.1) 25%, rgba(121,121,121,.2) 37%, rgba(121,121,121,.1) 63%) !important;
    -webkit-animation: zsn-placeholder-horizontal 1.5s ease infinite !important;
    animation: zsn-placeholder-horizontal 1.5s ease infinite !important;
    background-size: 400% 100% !important;
    color: rgba(255,255,255,.35) !important;
    pointer-events: none !important;
}
body.dark-theme .sites-weight.loading {
    background: linear-gradient(115deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%) !important;
}
.sites-weight.loading span {
    color: rgba(255,255,255,.55) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    letter-spacing: 1px;
}
@-webkit-keyframes zsn-placeholder-horizontal {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@keyframes zsn-placeholder-horizontal {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* 5 个品牌背景 SVG data-uri */
.sites-weight.BaiduPCWeight {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18' viewBox='0 0 52 18'%3E%3Crect width='52' height='18' fill='%232932E1'/%3E%3Crect x='0' y='0' width='18' height='18' fill='%23fff'/%3E%3Cg transform='translate(2.2 2.2) scale(0.78)' fill='%232932E1'%3E%3Cellipse cx='9.1' cy='10.6' rx='4.3' ry='3.2'/%3E%3Ccircle cx='3.6' cy='5.2' r='2.0'/%3E%3Ccircle cx='8.2' cy='3.3' r='1.7'/%3E%3Ccircle cx='13.2' cy='5.2' r='2.0'/%3E%3Ccircle cx='15.2' cy='10.2' r='1.7'/%3E%3C/g%3E%3C/svg%3E") !important;
    border: 1px solid #2932E1 !important;
}
.sites-weight.BaiduMobileWeight {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18' viewBox='0 0 52 18'%3E%3Crect width='52' height='18' fill='%23FF9326'/%3E%3Crect x='0' y='0' width='18' height='18' fill='%23fff'/%3E%3Cg transform='translate(2.2 2.2) scale(0.78)' fill='%23E9741A'%3E%3Cellipse cx='9.1' cy='10.6' rx='4.3' ry='3.2'/%3E%3Ccircle cx='3.6' cy='5.2' r='2.0'/%3E%3Ccircle cx='8.2' cy='3.3' r='1.7'/%3E%3Ccircle cx='13.2' cy='5.2' r='2.0'/%3E%3Ccircle cx='15.2' cy='10.2' r='1.7'/%3E%3C/g%3E%3Cpath d='M11.2 12.2 l2.4 -3.6 l0.8 0.8 l-1.6 2.4 z' fill='%23E9741A'/%3E%3Ccircle cx='14.3' cy='15.3' r='0.75' fill='%23E9741A'/%3E%3Cpath d='M10.8 15.8 h4.5 v-0.6 h-4.5 z' fill='%23E9741A'/%3E%3C/svg%3E") !important;
    border: 1px solid #FF9326 !important;
}
.sites-weight.HaoSouWeight {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18' viewBox='0 0 52 18'%3E%3Crect width='52' height='18' fill='%2300B140'/%3E%3Crect x='0' y='0' width='18' height='18' fill='%23fff'/%3E%3Ccircle cx='9' cy='9' r='5.3' fill='none' stroke='%2300B140' stroke-width='1.7'/%3E%3Cpath d='M4.8 4.8 A6 6 0 0 0 13.2 13.2 L11.4 11.4 A3.5 3.5 0 0 1 6.6 6.6 Z' fill='%2300B140'/%3E%3Ccircle cx='12.5' cy='13' r='1.3' fill='%23FFCB05'/%3E%3Ccircle cx='12.5' cy='13' r='0.55' fill='%2300B140'/%3E%3C/svg%3E") !important;
    border: 1px solid #00B140 !important;
}
.sites-weight.SMWeight {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18' viewBox='0 0 52 18'%3E%3Crect width='52' height='18' fill='%23FFB020'/%3E%3Crect x='0' y='0' width='18' height='18' fill='%23fff'/%3E%3Cg transform='translate(2.5 1.8)' fill='none' stroke='%238F4F13' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.8 13.2 C 2.6 10.4, 2.8 6.8, 4.6 5.0 C 6.0 3.6, 8.0 3.3, 9.2 3.8 C 10.2 4.2, 10.5 5.0, 10.4 6.2 C 10.5 5.9, 11.2 5.4, 12.2 5.2 C 13.2 5.0, 14.0 5.6, 14.2 6.6 C 14.6 7.6, 14.2 9.0, 13.2 9.8 L 13.2 10.4 L 14.4 10.4 L 14.4 13.8 L 10.8 13.8 L 10.8 12.2 C 9.8 12.6, 7.8 12.6, 6.4 13.2 Z' fill='%23B2661A'/%3E%3Cpath d='M4.8 4.0 L 5.6 2.0 L 7.0 3.8' fill='%238F4F13' stroke='%238F4F13'/%3E%3Cpath d='M7.0 3.2 L 8.2 1.6 L 9.2 3.4' fill='%238F4F13' stroke='%238F4F13'/%3E%3Ccircle cx='8.6' cy='7.6' r='0.45' fill='%23fff' stroke='none'/%3E%3C/g%3E%3C/svg%3E") !important;
    border: 1px solid #FFB020 !important;
}
.sites-weight.TouTiaoWeight {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18' viewBox='0 0 52 18'%3E%3Crect width='52' height='18' fill='%23F23839'/%3E%3Cg transform='translate(0.6 0.2)' fill='%23fff' font-family='SimHei, Microsoft YaHei, PingFang SC, sans-serif' font-size='9.5' font-weight='900' letter-spacing='-0.5'%3E%3Ctext x='1.6' y='12.6' %3E头%3C/text%3E%3Ctext x='9.6' y='12.6' %3E条%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    border: 1px solid #F23839 !important;
}

/* =========================================
   5. site-go 按钮组（OneNav 三件套：打开网站 / 手机查看 / 反馈 + btn-i-r 滑入动画）
   ========================================= */
.btn-i-r {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: .3s all !important;
    box-sizing: border-box !important;
}
.btn-i-r.px-4 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.btn-i-r span {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-right: 1.65rem;
    gap: 0;
}
.btn-i-r span > svg:last-child,
.btn-i-r span > .icon:last-child,
.btn-i-r span > i.fa:last-child,
.btn-i-r span > i.zsn-fa-right {
    position: absolute;
    right: 0.05rem;
    top: 50%;
    height: 1em;
    opacity: .7;
    transform: translateY(-50%);
    transition: all 200ms ease-out;
    will-change: right, opacity;
    margin: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-i-r:hover span > svg:last-child,
.btn-i-r:focus span > svg:last-child,
.btn-i-r:hover span > .icon:last-child,
.btn-i-r:focus span > .icon:last-child,
.btn-i-r:hover span > i.fa:last-child,
.btn-i-r:focus span > i.fa:last-child,
.btn-i-r:hover span > i.zsn-fa-right,
.btn-i-r:focus span > i.zsn-fa-right {
    opacity: 1;
    right: -0.5rem;
}
.btn-i-r i.fa-qrcode {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 1em !important;
    margin-right: 8px !important;
    display: inline-block !important;
    line-height: 1;
    font-style: normal;
    flex-shrink: 0;
}
.btn-i-r i.zsn-fa-right {
    font-size: 15px;
    margin-left: 0 !important;
}
.site-go i.fa {
    display: inline-block;
    vertical-align: -1px;
    line-height: 1;
    color: inherit;
    font-size: 1em;
    font-style: normal;
    margin: 0;
}
.site-go .btn.vc-theme.btn-shadow.btn-i-r,
.site-go .btn.vc-theme {
    --this-color:       var(--wzw-btn-color);
    --this-hover-color: var(--wzw-btn-hover-color);
    --this-bg:          var(--wzw-btn-bg);
    --this-hover-bg:    var(--wzw-btn-hover-bg);
    --this-shadow-bg:   var(--wzw-btn-shadow-bg);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
    border: 1px solid transparent !important;
    box-shadow: 0px 12px 20px -8px var(--this-shadow-bg);
}
.site-go .btn.vc-theme.btn-shadow.btn-i-r:hover,
.site-go .btn.vc-theme:hover {
    color: var(--this-hover-color) !important;
    background: var(--this-hover-bg) !important;
    box-shadow: 0px 2px 10px 0px transparent;
}
.site-go .btn.vc-l-theme.btn-outline.btn-i-r,
.site-go .btn.vc-l-theme.btn-outline {
    color: var(--wzw-btn-bg) !important;
    background: transparent !important;
    border: 1px solid var(--wzw-btn-bg) !important;
    --this-color: var(--wzw-btn-bg);
    --this-bg: var(--wzw-btn-bg);
    --this-hover-color: #ffffff;
    --this-hover-bg: var(--wzw-btn-bg);
}
.site-go .btn.vc-l-theme.btn-outline.btn-i-r:hover,
.site-go .btn.vc-l-theme.btn-outline:hover {
    color: var(--this-hover-color) !important;
    background: var(--this-hover-bg) !important;
    border-color: transparent !important;
    box-shadow: 0px 2px 10px 0px var(--wzw-btn-shadow-bg);
}
.site-go .btn.vc-red.tooltip-toggle,
.site-go .btn.vc-red {
    --this-color: var(--wzw-btn-color, #ffe7eb);
    --this-hover-color: #ffffff;
    --this-bg:    var(--theme-color, #f1404b);
    --this-hover-bg: #e4415f;
    --this-shadow-bg: rgba(219, 31, 66, 0.7);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
    border: 1px solid transparent !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.site-go .btn.vc-red.tooltip-toggle:hover,
.site-go .btn.vc-red:hover {
    color: var(--this-hover-color) !important;
    background: var(--this-hover-bg) !important;
}
.site-go .btn.vc-red.tooltip-toggle i.fa {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: baseline;
    margin: 0 !important;
}
.site-go .btn.vc-red.tooltip-toggle .icon,
.site-go .btn.vc-red.tooltip-toggle svg {
    width: 1.2em !important;
    height: 1.2em !important;
    margin: 0 !important;
    vertical-align: -2px !important;
}
.site-go a + a {
    margin-left: 10px !important;
}
.site-go .btn {
    margin-bottom: 10px !important;
}
.site-go .btn.btn-arrow.disabled,
.site-go .btn.disabled {
    opacity: .45;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
    filter: grayscale(.2);
    color: var(--main-color, #444) !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    background-color: rgba(138, 138, 138, .15) !important;
}

/* 旧 btn-arrow 兼容 */
.site-body .btn-arrow,
.site-go .btn-arrow,
.site-go .btn.btn-arrow {
    color: var(--main-color, #444);
    border-radius: 6px !important;
    padding: 7px 16px !important;
    background-color: rgba(138, 138, 138, .15) !important;
    --this-color: var(--main-color, #444);
    --this-bg: rgba(138, 138, 138, .15);
    --this-hover-color: #ffffff;
    --this-hover-bg: #202224;
    --this-border: transparent;
    transition: .3s all !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}
.site-body .btn-arrow:hover,
.site-body .btn-arrow:focus,
.site-go .btn-arrow:hover,
.site-go .btn-arrow:focus,
.site-go .btn.btn-arrow:hover,
.site-go .btn.btn-arrow:focus {
    color: #ffffff !important;
    background: #202224 !important;
    --this-color: #ffffff;
    --this-bg: #202224;
}

/* =========================================
   6. terms-list 标签胶囊（分类+标签 33% flex 网格）
   ========================================= */
.terms-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
}
.terms-list .btn {
    border-radius: 9999px !important;
    margin: 4px !important;
    padding: 3px 11px !important;
    font-weight: 500;
    line-height: 1.6 !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    white-space: nowrap;
    transition: all .2s ease;
    box-sizing: border-box;
}
.terms-list .btn .icon,
.terms-list .btn svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
    vertical-align: -1px !important;
    opacity: .9;
    display: inline-block;
}
.terms-list .btn:hover {
    transform: translateY(-1px);
    color: var(--this-hover-color, #ffffff) !important;
    background: var(--this-hover-bg) !important;
}

/* 6.5 收藏按钮 .posts-like */
.posts-like { align-self: flex-start; padding-top: 4px; }
.posts-like .io-posts-like.btn,
.posts-like .btn.vc-l-red {
    border-radius: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    --this-color: var(--theme-color, #f1404b);
    --this-hover-color: #ffffff;
    --this-bg: rgba(255, 84, 115, 0.1);
    --this-hover-bg: var(--theme-color, #f1404b);
    --this-shadow-bg: rgba(207, 56, 84, 0.7);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
    border: 1px solid transparent !important;
    transition: .2s all !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}
.posts-like .io-posts-like.btn:hover,
.posts-like .btn.vc-l-red:hover {
    color: var(--this-hover-color) !important;
    background: var(--this-hover-bg) !important;
}
.posts-like .io-posts-like.btn .icon,
.posts-like .btn.vc-l-red .icon {
    width: .95em; height: .95em;
    margin-right: 4px;
    vertical-align: -1px;
}
.posts-like .io-posts-like.btn .star-count,
.posts-like .btn.vc-l-red .star-count {
    margin-left: 5px;
    opacity: .9;
    font-weight: 500;
}
.posts-like .io-posts-like.btn.liked,
.io-posts-like.liked {
    --this-bg: var(--theme-color, #f1404b);
    --this-color: #fff;
    color: #fff !important;
    background: var(--theme-color, #f1404b) !important;
}

/* =========================================
   7. sites-preview 右侧预览卡片（OneNav 独有：favicon 顶栏 + 大图 + hover 悬浮按钮）
   ========================================= */
.preview-body {
    background: var(--main-bg-color, #fff);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--muted-border-color, rgba(0,0,0,.06));
    box-shadow: 0 20px 40px -24px rgba(0,0,0,.25);
    transition: all .25s;
    padding: 8px;
}
.preview-body:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 55px -24px rgba(0,0,0,.32);
}
.site-favicon {
    padding: 9px 16px !important;
    background: var(--muted-bg-2-color, #fafbfc);
    border-bottom: 1px solid var(--muted-border-color, rgba(0,0,0,.05)) !important;
    font-size: 12px;
    display: flex !important;
    align-items: center;
    color: var(--muted-color, #999);
}
.site-favicon img {
    width: 16px; height: 16px;
    border-radius: 3px;
    margin-right: 6px;
    background: var(--main-bg-color, #fff);
    padding: 1px;
}
.site-img.img-sites {
    position: relative;
    display: block;
    line-height: 0;
    background: var(--muted-bg-color, #e8eaee);
    border-radius: 8px;
    overflow: hidden;
}
.site-img.img-sites > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    aspect-ratio: 456 / 300;
    background: var(--muted-bg-color, #e8eaee);
    border-radius: 8px;
}
.site-img.img-sites .preview-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    padding: 6px 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    white-space: nowrap;
    transition: all .25s ease;
    pointer-events: none;
    z-index: 3;
}
.site-img.img-sites .preview-btn span {
    padding-right: 0 !important;
}
.site-img.img-sites:hover .preview-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.site-img.img-sites::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 100%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    border-radius: 8px;
}
.site-img.img-sites:hover::after { opacity: 1; }

/* =========================================
   8. 正文卡片 & 相关导航（颜色/背景交给 Zibll 变量，正文本身交给 .article-content）
   ========================================= */

/* 外层 panel.card：强制 100% 宽 + 贴合 Zibll 原生卡片风格（已有 .card.panel 自带圆角阴影） */
.panel.site-content.card {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--main-bg-color, #fff) !important;
    border: 1px solid var(--muted-border-color, rgba(0,0,0,.05)) !important;
    margin-bottom: 20px !important;
}
.panel.site-content.card .card-body {
    padding: 28px !important;
}

/* 正文标题（网站介绍 / 相关导航）交给 Zibll 主色 */
.content-title {
    color: var(--main-color, #1f2937);
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    margin: 0 0 20px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--muted-border-color, rgba(0,0,0,.06)) !important;
    width: 100%;
    line-height: 1.4;
}
.content-title .icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    color: var(--theme-color, #f1404b);
}
.content-title.text-gray {
    color: var(--muted-color, #4b5563);
}
.content-title .site-tag {
    color: var(--theme-color, #f1404b);
    font-weight: 700;
    margin-right: 4px;
    font-style: normal;
}

/* 相关导航卡片 url-body（OneNav 独有布局） */
.url-body {
    position: relative;
    background: var(--main-bg-color, #fff);
    border-radius: 12px;
    border: 1px solid var(--muted-border-color, rgba(0,0,0,.06));
    transition: all .25s;
    overflow: hidden;
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.08);
    height: 100%;
}
.url-body:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.18);
    border-color: var(--focus-color-opacity3, rgba(241,64,75,.18));
}
.url-body .card { border:0; background:transparent; margin:0; box-shadow:none; height:100%; }
.url-body .card-body { padding: 14px 16px; flex:1; min-height: 62px; }
.url-body .url-info .font-bold { color: var(--main-color, #1f2937); font-weight:600; font-size:15px; }
.url-body .url-info p { color: var(--muted-color, #888); font-size:12.5px; line-height:1.4; }
.url-body:hover .togo { opacity: .9; }
.url-body .togo:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(255,255,255,0), var(--focus-color-opacity1, rgba(241,64,75,.16)));
}
.overflowClip_1 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* =========================================
   9. 暗黑模式（Zibll 真实前缀：body.dark-theme，不是 .dark-mode）
      注意：正文文字/标题/背景已经由 .article-content + Zibll 变量自动覆盖，
            我们只覆盖 OneNav 独有组件：preview-body / site-favicon / SEO / url-body
   ========================================= */
body.dark-theme .preview-body {
    background: var(--muted-bg-2-color, #26282a);
    border-color: var(--muted-border-color, rgba(255,255,255,.06));
}
body.dark-theme .site-favicon {
    background: var(--muted-bg-color, #2d2f32);
    border-bottom-color: var(--muted-border-color, rgba(255,255,255,.06)) !important;
    color: var(--muted-2-color, #888);
}
body.dark-theme .site-img.img-sites {
    background: var(--muted-bg-color, #1f2022);
}
body.dark-theme .site-img.img-sites > img {
    background: var(--muted-bg-color, #1f2022);
}
body.dark-theme .site-name {
    color: var(--main-color, #f0f0f0);
}
body.dark-theme .table-div .table-title {
    color: var(--muted-color, #a0a5ab) !important;
}
body.dark-theme .table-div .table-value strong {
    color: var(--main-color, #e8eaed);
}
body.dark-theme .site-name-box .d-flex.text-muted.text-sm,
body.dark-theme .zsn-detail-head .site-name-box .zsn-meta-row {
    color: var(--muted-color, #a0a5ab) !important;
}
body.dark-theme .url-body {
    background: var(--muted-bg-2-color, #26282a);
    border-color: var(--muted-border-color, rgba(255,255,255,.06));
}
body.dark-theme .url-body .url-info .font-bold {
    color: var(--main-color, #e8e8e8);
}
body.dark-theme .url-body .url-img {
    background: var(--muted-bg-color, #2d2f32);
    border-color: var(--muted-border-color, rgba(255,255,255,.08));
}

/* =========================================
   10. 移动端（结构相关保留，颜色由变量自动适配）
   ========================================= */
@media (max-width: 767.98px) {
    .site-name { font-size: 22px; }
    .site-name.h3 { font-size: 21px; }
    .site-content { padding: 0; }
    .sites-preview { max-width: 100%; margin-left: 0 !important; }
    .preview-body .site-img.img-sites > img { aspect-ratio: 16 / 10; }
    .panel.site-content.card .card-body { padding: 20px 18px !important; }
    .content-title { font-size: 17px; }
    .site-go .btn { padding: 7px 14px; font-size: 14px; }
}