/* ===== 变量体系（白天模式）===== */
    :root {
        --vb-blue: #3b82f6; --vb-blue-deep: #2563eb; --vb-blue-light: #eff6ff;
        --vb-blue-border: #bfdbfe; --vb-blue-tag-bg: rgba(59,130,246,0.1);
        --vb-purple: #a855f7; --vb-purple-deep: #9333ea; --vb-purple-light: #faf5ff;
        --vb-purple-border: #e9d5ff; --vb-purple-tag-bg: rgba(168,85,247,0.1);
        --vb-green: #22c55e; --vb-green-deep: #16a34a; --vb-green-light: #f0fdf4;
        --vb-green-border: #bbf7d0; --vb-green-tag-bg: rgba(34,197,94,0.1);
        --vb-card-bg: #fff; --vb-card-border: rgba(0,0,0,0.05);
        --vb-card-shadow-hover: 0 12px 30px rgba(0,0,0,0.12);
        --vb-card-img-bg: #eee; --vb-title-color: #333; --vb-text-color: #333;
        --vb-divider-color: rgba(0,0,0,0.06);
        /* Tab组件新增变量 */
        --vb-tab-bg:          #ffffff;
        --vb-tab-nav-bg:      #f8f9fc;
        --vb-tab-border:      rgba(0,0,0,0.08);
        --vb-tab-border-hi:   rgba(0,0,0,0.15);
        --vb-tab-text:        #6b7280;
        --vb-tab-text-active: #1c1e2e;
        --vb-tab-hover-bg:    rgba(0,0,0,0.04);
        --vb-tab-active-bg:   rgba(0,0,0,0.03);
        --vb-tab-shadow:      0 1px 6px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
        --vb-panel-link:      #5c6080;
        --vb-panel-link-hover:#1c1e2e;
        --vb-panel-hover-bg:  rgba(0,0,0,0.04);
        --vb-arrow-bg:        #ffffff;
        --vb-arrow-border:    rgba(0,0,0,0.12);
        --vb-arrow-hover-bg:  #f0f1f7;
        --vb-fade-left-color: #f8f9fc;
        --vb-fade-right-color:#f8f9fc;
        --vb-dot-inactive:    rgba(0,0,0,0.15);
        /* 5色Tab变量 */
        --vb-c0: #3b82f6; --vb-c0-bg: rgba(59,130,246,0.08);
        --vb-c1: #a855f7; --vb-c1-bg: rgba(168,85,247,0.08);
        --vb-c2: #22c55e; --vb-c2-bg: rgba(34,197,94,0.08);
        --vb-c3: #f97316; --vb-c3-bg: rgba(249,115,22,0.08);
        --vb-c4: #ec4899; --vb-c4-bg: rgba(236,72,153,0.08);
    }

    /* ===== 黑夜模式（.dark-theme）===== */
    .dark-theme {
        --vb-blue: #60a5fa; --vb-blue-deep: #93c5fd; --vb-blue-light: #1e3a8a;
        --vb-blue-border: #1e40af; --vb-blue-tag-bg: rgba(96,165,250,0.15);
        --vb-purple: #c084fc; --vb-purple-deep: #d8b4fe; --vb-purple-light: #581c87;
        --vb-purple-border: #6b21a8; --vb-purple-tag-bg: rgba(192,132,252,0.15);
        --vb-green: #4ade80; --vb-green-deep: #86efac; --vb-green-light: #143f2d;
        --vb-green-border: #1b4332; --vb-green-tag-bg: rgba(74,222,128,0.15);
        --vb-card-bg: #2b2b2b; --vb-card-border: rgba(255,255,255,0.08);
        --vb-card-shadow-hover: 0 12px 30px rgba(0,0,0,0.4);
        --vb-card-img-bg: #1a1a1a; --vb-title-color: #f1f1f1; --vb-text-color: #f1f1f1;
        --vb-divider-color: rgba(255,255,255,0.08);
        --vb-tab-bg:          #2b2b2b;
        --vb-tab-nav-bg:      #222428;
        --vb-tab-border:      rgba(255,255,255,0.08);
        --vb-tab-border-hi:   rgba(255,255,255,0.18);
        --vb-tab-text:        #9094a8;
        --vb-tab-text-active: #e8eaf0;
        --vb-tab-hover-bg:    rgba(255,255,255,0.05);
        --vb-tab-active-bg:   rgba(255,255,255,0.03);
        --vb-tab-shadow:      0 2px 12px rgba(0,0,0,0.3);
        --vb-panel-link:      #8a93b8;
        --vb-panel-link-hover:#e8eaf0;
        --vb-panel-hover-bg:  rgba(255,255,255,0.05);
        --vb-arrow-bg:        #333540;
        --vb-arrow-border:    rgba(255,255,255,0.12);
        --vb-arrow-hover-bg:  rgba(255,255,255,0.1);
        --vb-fade-left-color: #222428;
        --vb-fade-right-color:#222428;
        --vb-dot-inactive:    rgba(255,255,255,0.2);
        --vb-c0: #60a5fa; --vb-c0-bg: rgba(96,165,250,0.1);
        --vb-c1: #c084fc; --vb-c1-bg: rgba(192,132,252,0.1);
        --vb-c2: #4ade80; --vb-c2-bg: rgba(74,222,128,0.1);
        --vb-c3: #fb923c; --vb-c3-bg: rgba(251,146,60,0.1);
        --vb-c4: #f472b6; --vb-c4-bg: rgba(244,114,182,0.1);
    }

    /* ===== 全局基础样式 ===== */
    .vb-auto-link { color: var(--vb-blue); text-decoration: none; border-bottom: 1px dashed var(--vb-blue-border); transition: all .2s; }
    .vb-auto-link:hover { color: var(--vb-blue-deep); border-bottom-color: var(--vb-blue-deep); }
    .vb-section-divider { border: none; height: 1px; background: var(--vb-divider-color); margin: 40px 0; }
    .vb-recommendation-banners { margin-bottom: 40px; }
    .vb-post-crumb { font-size: 13px; color: #888; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--vb-divider-color); }
    .vb-post-crumb a { color: var(--vb-blue); text-decoration: none; transition: color 0.2s; }
    .vb-post-crumb a:hover { color: var(--vb-blue-deep); }
    .vb-post-crumb .vb-crumb-sep { margin: 0 6px; color: #999; }
    .vb-post-crumb .vb-crumb-current { color: var(--vb-text-color); font-weight: 500; }

    /* ===== Tab 外层容器 ===== */
    .vb-tab-widget {
        background:    var(--vb-tab-bg);
        border:        1px solid var(--vb-tab-border);
        border-radius: 12px;
        overflow:      hidden;
        margin:        40px 0 16px 0;
        box-shadow:    var(--vb-tab-shadow);
        transition:    background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    /* ===== Tab 导航区 ===== */
    .vb-tab-nav-outer {
        position:      relative;
        background:    var(--vb-tab-nav-bg);
        border-bottom: 1px solid var(--vb-tab-border);
        transition:    background 0.3s, border-color 0.3s;
    }
    .vb-tab-nav-outer::after {
        content:    "";
        display:    block;
        height:     1px;
        background: var(--vb-tab-border);
        transition: background 0.3s;
    }
    .vb-tab-nav-wrap { position: relative; overflow: hidden; }
    .vb-tab-nav-scroll {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 40px;
        justify-content: center;
    }
    .vb-tab-nav-scroll::-webkit-scrollbar { display: none; }
    .vb-tab-nav-inner { display: flex; min-width: min-content; flex-shrink: 0; }
    
    .vb-tab-btn {
        flex-shrink: 0;
        padding: 12px 14px 11px;
        white-space: nowrap;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 400;
        color: var(--vb-tab-text);
        position: relative;
        transition: color 0.2s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .vb-tab-btn::after {
        content: "";
        position: absolute;
        bottom: 0; left: 12px; right: 12px;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: transparent;
        transition: background 0.25s;
    }
    .vb-tab-btn:hover { color: var(--vb-tab-text-active); background: var(--vb-tab-hover-bg); }
    .vb-tab-btn.vb-tab-active { color: var(--vb-tab-text-active); font-weight: 500; }
    
    .vb-tab-btn[data-index="0"]::after, .vb-tab-btn[data-index="1"]::after, .vb-tab-btn[data-index="2"]::after, .vb-tab-btn[data-index="3"]::after, .vb-tab-btn[data-index="4"]::after { background: transparent; }
    .vb-tab-btn.vb-tab-active[data-index="0"]::after { background: var(--vb-c0); }
    .vb-tab-btn.vb-tab-active[data-index="1"]::after { background: var(--vb-c1); }
    .vb-tab-btn.vb-tab-active[data-index="2"]::after { background: var(--vb-c2); }
    .vb-tab-btn.vb-tab-active[data-index="3"]::after { background: var(--vb-c3); }
    .vb-tab-btn.vb-tab-active[data-index="4"]::after { background: var(--vb-c4); }
    .vb-tab-btn.vb-tab-active[data-index="0"] { background: var(--vb-c0-bg); }
    .vb-tab-btn.vb-tab-active[data-index="1"] { background: var(--vb-c1-bg); }
    .vb-tab-btn.vb-tab-active[data-index="2"] { background: var(--vb-c2-bg); }
    .vb-tab-btn.vb-tab-active[data-index="3"] { background: var(--vb-c3-bg); }
    .vb-tab-btn.vb-tab-active[data-index="4"] { background: var(--vb-c4-bg); }

    .vb-tab-arrow {
        position: absolute; top: 0; bottom: 0; width: 40px;
        background: none; border: none; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        z-index: 10; transition: opacity 0.2s; padding: 0;
    }
    .vb-tab-arrow-left  { left: 0; }
    .vb-tab-arrow-right { right: 0; }
    .vb-tab-arrow-icon {
        width: 26px; height: 26px; border-radius: 50%;
        border: 1px solid var(--vb-arrow-border); background: var(--vb-arrow-bg);
        display: flex; align-items: center; justify-content: center;
        color: var(--vb-tab-text-active);
        transition: background 0.15s, transform 0.15s, border-color 0.15s;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .vb-tab-arrow:hover .vb-tab-arrow-icon {
        background: var(--vb-arrow-hover-bg);
        border-color: var(--vb-tab-border-hi);
        transform: scale(1.08);
    }
    .vb-tab-arrow:active .vb-tab-arrow-icon { transform: scale(0.93); }
    .vb-arrow-hidden { opacity: 0 !important; pointer-events: none !important; }

    .vb-tab-fade {
        position: absolute; top: 0; bottom: 0; width: 56px;
        pointer-events: none; z-index: 9; transition: opacity 0.25s;
    }
    .vb-tab-fade-left  { left: 0; background: linear-gradient(to right, var(--vb-fade-left-color) 20%, transparent); }
    .vb-tab-fade-right { right: 0; background: linear-gradient(to left, var(--vb-fade-right-color) 20%, transparent); }
    .vb-fade-hidden { opacity: 0 !important; pointer-events: none !important; }
    .vb-swipe-hint { display: none !important; }

    .vb-tab-dots {
        display: flex; align-items: center; justify-content: center;
        gap: 5px; padding: 5px 0 4px; transition: border-color 0.3s;
    }
    .vb-tab-dot {
        height: 3px; border-radius: 2px; background: var(--vb-dot-inactive);
        width: 6px; cursor: pointer;
        transition: width 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
    }
    .vb-tab-dot.vb-dot-active { width: 18px; }
    .vb-tab-dot.vb-dot-active[data-index="0"] { background: var(--vb-c0); }
    .vb-tab-dot.vb-dot-active[data-index="1"] { background: var(--vb-c1); }
    .vb-tab-dot.vb-dot-active[data-index="2"] { background: var(--vb-c2); }
    .vb-tab-dot.vb-dot-active[data-index="3"] { background: var(--vb-c3); }
    .vb-tab-dot.vb-dot-active[data-index="4"] { background: var(--vb-c4); }

    /* ===== 文章列表面板区 ===== */
    .vb-tab-content { position: relative; }
    .vb-tab-panel {
        display: none;
        padding: 10px 14px 8px; /* 边缘完美留白呼吸感 */
        animation: vbPanelIn 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    .vb-tab-panel.vb-panel-active { display: block; }
    @keyframes vbPanelIn {
        from { opacity: 0; transform: translateX(6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .vb-panel-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 10px; padding-bottom: 10px;
        border-bottom: 1px solid var(--vb-tab-border);
        transition: border-color 0.3s;
    }
    .vb-panel-title {
        display: flex; align-items: center; gap: 8px; font-size: 13px;
        font-weight: 600; color: var(--vb-tab-text-active); flex: 1; min-width: 0;
    }
    .vb-panel-title-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .vb-panel-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vb-panel-viewall {
        flex-shrink: 0; font-size: 11px; color: var(--vb-tab-text);
        text-decoration: none !important; padding: 5px 10px; min-height: 28px;
        display: flex; align-items: center; border: 1px solid var(--vb-tab-border);
        border-radius: 4px; white-space: nowrap;
        transition: color 0.2s, border-color 0.2s, background 0.2s; margin-left: 12px;
    }
    .vb-panel-viewall:hover { color: var(--vb-tab-text-active); border-color: var(--vb-tab-border-hi); background: var(--vb-tab-hover-bg); }

    /* 面板列表垂直排列极 */
    .vb-panel-list {
        list-style: none !important; padding: 0 !important; margin: 0 !important;
        display: flex; flex-direction: column; gap: 2px;
    }
    .vb-panel-list li {
        list-style: none !important; padding: 0 !important; margin: 0 !important;
        background: none !important; opacity: 0;
        animation: vbListItemIn 0.25s forwards;
    }
    .vb-panel-list li::before { display: none !important; content: none !important; }
    .vb-panel-list li:nth-child(1){animation-delay:.02s}
    .vb-panel-list li:nth-child(2){animation-delay:.06s}
    .vb-panel-list li:nth-child(3){animation-delay:.10s}
    .vb-panel-list li:nth-child(4){animation-delay:.14s}
    .vb-panel-list li:nth-child(5){animation-delay:.18s}
    .vb-panel-list li:nth-child(6){animation-delay:.22s}
    @keyframes vbListItemIn {
        from { opacity:0; transform: translateX(-5px); }
        to   { opacity:1; transform: translateX(0); }
    }

    /* 单条文章排版设计 */
    .vb-panel-link {
        display: flex; align-items: center;
        gap: 8px; /* 序号和文字的间距 */
        padding: 6px 10px; /* PC端内外边距 */
        border-radius: 6px;
        text-decoration: none !important;
        color: #2d2f3e; font-size: 15px; line-height: 1.4;
        position: relative; overflow: hidden;
        transition: background 0.15s, color 0.15s, transform 0.18s;
    }
    .dark-theme .vb-panel-link { color: #d4d6e4; }
    .vb-panel-link:hover { background: var(--vb-panel-hover-bg); color: #1c1e2e; transform: translateX(5px); }
    .dark-theme .vb-panel-link:hover { color: #f0f2ff; }

    /* 面板悬停保留彩色竖条（作为视觉引导点缀） */
    .vb-panel-link::before {
        content: ""; position: absolute; left: 0; top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 2px; height: 55%; border-radius: 1px;
        transition: transform 0.18s cubic-bezier(0.4,0,0.2,1);
    }
    .vb-tab-panel[data-index="0"] .vb-panel-link::before { background: var(--vb-c0); }
    .vb-tab-panel[data-index="1"] .vb-panel-link::before { background: var(--vb-c1); }
    .vb-tab-panel[data-index="2"] .vb-panel-link::before { background: var(--vb-c2); }
    .vb-tab-panel[data-index="3"] .vb-panel-link::before { background: var(--vb-c3); }
    .vb-tab-panel[data-index="4"] .vb-panel-link::before { background: var(--vb-c4); }
    .vb-panel-link:hover::before { transform: translateY(-50%) scaleY(1); }

    /* 序号处理 */
    .vb-panel-link-num {
        font-family: "Impact", "Arial Black", sans-serif;
        font-size: 14px;
        color: #9499b0;
        width: 18px; /* 宽度控制 */
        flex-shrink: 0;
        text-align: left; /* 强制靠左对齐 */
        line-height: 1;
    }
    .dark-theme .vb-panel-link-num { color: #6b7280; }
    
    /* 标题单行截断防爆行 */
    .vb-panel-link-text {
        flex: 1; font-weight: 400;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    }

    /* 1. 基础形态圆形灰底 */
    .vb-panel-link-arr {
        font-size: 12px !important; /* 如果你用了方案四的SVG，这个属性可以不改 */
        font-weight: bold;
        color: var(--vb-tab-text);
        width: 22px;
        height: 22px;
        background: var(--vb-tab-hover-bg); /* 平时是非常微弱的灰底圈 */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        flex-shrink: 0;
        transition: all 0.2s ease-out;
    }

    /* 2. 悬停通用动效：向右微动，箭头变白 */
    .vb-panel-link:hover .vb-panel-link-arr {
        opacity: 1;
        color: #ffffff !important; /* 悬停时箭头统一变成纯白，对比更强烈 */
        transform: translateX(2px); 
    }

    /* 3. 动态获取面板的 5 种主色调和对应的 5 种浅色发光阴影 */
    .vb-tab-panel[data-index="0"] .vb-panel-link:hover .vb-panel-link-arr {
        background: var(--vb-c0) !important;
        box-shadow: 0 2px 6px var(--vb-c0-bg) !important;
    }
    .vb-tab-panel[data-index="1"] .vb-panel-link:hover .vb-panel-link-arr {
        background: var(--vb-c1) !important;
        box-shadow: 0 2px 6px var(--vb-c1-bg) !important;
    }
    .vb-tab-panel[data-index="2"] .vb-panel-link:hover .vb-panel-link-arr {
        background: var(--vb-c2) !important;
        box-shadow: 0 2px 6px var(--vb-c2-bg) !important;
    }
    .vb-tab-panel[data-index="3"] .vb-panel-link:hover .vb-panel-link-arr {
        background: var(--vb-c3) !important;
        box-shadow: 0 2px 6px var(--vb-c3-bg) !important;
    }
    .vb-tab-panel[data-index="4"] .vb-panel-link:hover .vb-panel-link-arr {
        background: var(--vb-c4) !important;
        box-shadow: 0 2px 6px var(--vb-c4-bg) !important;
    }

    /* ===== Widget Footer (底部Bento矩阵区) ===== */
    .vb-widget-footer {
        border-top: 1px solid var(--vb-tab-border);
        padding: 12px 20px 14px; /* 控制整个矩阵离大卡片边框的距离 */
        transition: border-color 0.3s;
        margin-bottom: 0;
    }
    .vb-footer-hd {
        display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500;
        color: var(--vb-tab-text); margin-bottom: 8px; padding-left: 3px;
    }
    .vb-footer-hd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vb-tab-text); flex-shrink: 0; transition: background 0.3s; }

    /* PC端默认双列 Grid */
    .vb-footer-list {
        list-style: none !important; padding: 0 !important; margin: 0 !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .vb-footer-list li {
        list-style: none !important; padding: 0 !important; margin: 0 !important; background: none !important; width: 100%;
    }
    .vb-footer-list li::before { display: none !important; content: none !important; }

    /* Bento 卡片样式 */
    .vb-footer-link {
        display: flex; align-items: center; gap: 7px;
        padding: 10px 18px; /* 卡片内部的留白 */
        border-radius: 8px;
        text-decoration: none !important;
        color: var(--vb-tab-text-active);
        font-size: 13px; position: relative; overflow: visible;
        background: var(--vb-tab-nav-bg);
        border: 1px solid var(--vb-tab-border);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, background 0.15s;
    }
    .vb-footer-link::before { display: none; } /* 废除原有彩色竖条边框 */
    .vb-footer-link:hover {
        background: var(--vb-tab-hover-bg); color: var(--vb-tab-text-active);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border-color: var(--vb-tab-border-hi);
    }
    .dark-theme .vb-footer-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

    /* Bento 图标护甲 */
    .vb-footer-icon {
       
      
       
        width: 20px; height: 20px;
        flex-shrink: 0;
        color: var(--vb-tab-text-active);
       
        margin-right: 2px;
        transition: opacity 0.15s; fill: none; opacity: 0.8;
    }
    .vb-footer-link:hover .vb-footer-icon { opacity: 1; }
    .vb-footer-link-text { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* 右侧迷你引导标签 */
    .vb-footer-tag {
        flex-shrink: 0; font-weight: 500; white-space: nowrap; transition: opacity 0.15s;
        font-size: 11px; padding: 3px 6px; border-radius: 10px; opacity: 0.8;
    }
    .vb-footer-link:hover .vb-footer-tag { opacity: 1; }
    .vb-footer-tag.ft-creator   { background: var(--vb-c0-bg); color: var(--vb-c0); }
    .vb-footer-tag.ft-character { background: var(--vb-c1-bg); color: var(--vb-c1); }
    .vb-footer-tag.ft-game      { background: var(--vb-c2-bg); color: var(--vb-c2); }

    /* ===== 移动端自适应 (Max 768px) ===== */
    @media (max-width: 768px) {
        .vb-tab-btn {
            min-width: 76px; text-align: center; padding: 11px 10px 10px;
        }
        .vb-tab-arrow { display: none; }
        .vb-tab-nav-scroll { padding: 0; justify-content: flex-start; }
        .vb-tab-fade { width: 40px; }
        .vb-tab-fade-right { width: 48px; }
        .vb-swipe-hint { display: flex !important; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; z-index: 12; pointer-events: none; transition: opacity 0.25s; }
        .vb-swipe-hint-left  { left: 0; width: 28px; }
        .vb-swipe-hint-right { right: 0; width: 48px; }
        .vb-swipe-hint.vb-hint-hidden { opacity: 0; pointer-events: none; }
        .vb-swipe-label { font-size: 13px; font-weight: 600; color: var(--vb-tab-text); white-space: nowrap; line-height: 1; }
        
        /* 容器边距防撞墙 */
        .vb-tab-panel  { padding: 10px 12px 8px; }
        /* 手机端文章卡片：扩大高度热区，贴紧边缘 */
        .vb-panel-link { padding: 8px 8px; gap: 6px; font-size: 14px; }
        .vb-panel-link-num { width: 16px; font-size: 13px; }
        .vb-panel-head { padding-bottom: 6px; margin-bottom: 6px; }

        /* 手机端矩阵平铺：强制单列堆叠 */
        .vb-widget-footer { padding: 10px 18px 12px; }
        .vb-footer-list {
            grid-template-columns: 1fr; /* 1行1列，秒切上下折叠 */
            gap: 8px;
        }
    }