/**
 * TerminalBlog 标签特效样式
 * 使用 :: 作为特效分隔符
 * 例如: tags: ['SSL::red::bold', 'Docker::blue::glow']
 *
 * ================================================
 * 特效分类说明：
 * ================================================
 *
 * 【文字特效】- 仅作用于标签文字，不影响边框
 *   - 静态颜色：red, blue, green, yellow, purple, orange, pink, cyan, gray, white
 *   - 特殊效果：rainbow（彩虹渐变）, flow（流光字）, jump（逐字跳动）
 *
 * 【边框特效】- 仅作用于标签边框，不影响文字
 *   - 静态颜色：border-red, border-blue, border-green, border-yellow, border-purple,
 *              border-orange, border-pink, border-cyan, border-gray, border-white
 *   - 特殊效果：glow（发光）, border-rainbow（彩虹边框）, border-flow（流光边框）,
 *              border-pulse（边框呼吸）, marquee（跑马灯边框）
 *
 * 【整体特效 - 透明型】（可与文字/边框特效组合使用）
 *   - glass（玻璃流光）：光线划过效果
 *
 * 【整体特效 - 覆盖型】（使用后禁用其他文字和边框特效）
 *   - neon（霓虹灯）：完整的霓虹灯效果，包含文字和边框
 *
 * 【整体动作特效】（可与其他颜色特效组合使用）
 *   - bounce（整体跳动）：整个标签作为一个整体放大缩小的弹跳效果
 *
 * ================================================
 */

/* ==================== 基础标签样式 ==================== */

/* 标签统一基础样式（防止特效改变盒模型尺寸） */
.tag-item,
.tag-item[class*="tag-fx-"] {
    display: inline-block;
    padding: 4px 12px;
    margin: 4px;
    border-radius: 4px;
    font-size: 0.8em;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    /* 用 box-shadow 模拟边框，不改变尺寸，限制在 1px 范围内 */
    box-shadow: inset 0 0 0 1px var(--border);
    /* 防止上浮：固定 baseline */
    vertical-align: baseline;
    position: relative;
    /* 防止高度变化 */
    line-height: 1.4;
    /* 限制最大 z-index */
    z-index: 1;
}

/* 文章详情页标签 */
.post-detail .file-body .meta-line .tag,
.post-detail .file-body .meta-line .tag[class*="tag-fx-"] {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.2s ease;
    vertical-align: baseline;
    position: static;
}

/* 文章详情页：adlight 简化显示 - 彩点围绕标签 */
.post-detail .file-body .meta-line .tag.tag-fx-adlight,
.post-detail .file-body .meta-line .tag-preview.tag-fx-adlight {
    color: var(--cyan);
    position: static;
    overflow: visible;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 200, 0, 0.8);
}
.post-detail .file-body .meta-line .tag.tag-fx-adlight .adlight-svg,
.post-detail .file-body .meta-line .tag-preview.tag-fx-adlight .adlight-svg {
    display: none !important;
}

/* 左侧三个竖排彩点 */
.post-detail .file-body .meta-line .tag.tag-fx-adlight::before,
.post-detail .file-body .meta-line .tag-preview.tag-fx-adlight::before {
    content: '●\A●\A●';
    display: inline-block;
    white-space: pre;
    font-size: 0.22em;
    line-height: 1;
    background: linear-gradient(to bottom, #ff3333 0%, #ffcc00 50%, #33ff66 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: adlight-dots-flicker 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 2px #ff3333) drop-shadow(0 0 3px #ffcc00);
    position: relative;
    top: -0.15em;
}

/* 右侧三个竖排彩点 */
.post-detail .file-body .meta-line .tag.tag-fx-adlight::after,
.post-detail .file-body .meta-line .tag-preview.tag-fx-adlight::after {
    content: '●\A●\A●';
    display: inline-block;
    white-space: pre;
    font-size: 0.22em;
    line-height: 1;
    background: linear-gradient(to bottom, #33ff66 0%, #ffcc00 50%, #ff3333 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: adlight-dots-flicker 1.8s ease-in-out infinite;
    animation-delay: 0.3s;
    filter: drop-shadow(0 0 2px #33ff66) drop-shadow(0 0 3px #ffcc00);
    position: relative;
    top: -0.15em;
}

@keyframes adlight-dots-flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.6; }
    50% { opacity: 1; }
    75% { opacity: 0.5; }
}

/* 预览页标签（不可点击） */
.post-detail .file-body .meta-line .tag-preview,
.post-detail .file-body .meta-line .tag-preview[class*="tag-fx-"] {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    transition: color 0.2s ease;
    vertical-align: baseline;
    position: static;
}

/* 标签文字包裹（用于下划线等效果） */
.tag-item .tag-text,
.tag-item .count {
    display: inline;
}

/* 标签文字独占下划线效果 */
.tag-item.tag-fx-underline .tag-text {
    text-decoration: underline;
}

/* 标签项 hover 效果 - 统一终端经典绿 */
/* 注意：排除 glass 和 adlight 特效，因为它们有自定义的 hover 效果 */
.tag-item:hover,
.tag-item[class*="tag-fx-"]:not(.tag-fx-glass):not(.tag-fx-adlight):hover {
    border-color: var(--green);
    color: var(--green);
    background-color: rgba(0, 255, 65, 0.05);
    box-shadow: inset 0 0 0 1px var(--green), 0 0 6px rgba(0, 255, 65, 0.2);
    z-index: 2;
}

.tag-item:hover .count,
.tag-item[class*="tag-fx-"]:hover .count {
    color: var(--green);
}

/* ==================== 文字静态颜色特效 ==================== */

/* 红色 */
.tag-item.tag-fx-red,
.tag.tag-fx-red,
.tag-preview.tag-fx-red {
    color: #ff3333 !important;
}
.tag-item.tag-fx-red:hover,
.tag.tag-fx-red:hover {
    color: #ff3333;
    box-shadow: inset 0 0 0 1px #ff3333, 0 0 6px rgba(255, 51, 51, 0.25);
}

/* 蓝色 */
.tag-item.tag-fx-blue,
.tag.tag-fx-blue,
.tag-preview.tag-fx-blue {
    color: #3399ff !important;
}
.tag-item.tag-fx-blue:hover,
.tag.tag-fx-blue:hover {
    color: #3399ff;
    box-shadow: inset 0 0 0 1px #3399ff, 0 0 6px rgba(51, 153, 255, 0.25);
}

/* 绿色 */
.tag-item.tag-fx-green,
.tag.tag-fx-green,
.tag-preview.tag-fx-green {
    color: #33ff66 !important;
}
.tag-item.tag-fx-green:hover,
.tag.tag-fx-green:hover {
    color: #33ff66;
    box-shadow: inset 0 0 0 1px #33ff66, 0 0 6px rgba(51, 255, 102, 0.25);
}

/* 黄色 */
.tag-item.tag-fx-yellow,
.tag.tag-fx-yellow,
.tag-preview.tag-fx-yellow {
    color: #ffcc00 !important;
}
.tag-item.tag-fx-yellow:hover,
.tag.tag-fx-yellow:hover {
    color: #ffcc00;
    box-shadow: inset 0 0 0 1px #ffcc00, 0 0 6px rgba(255, 204, 0, 0.25);
}

/* 紫色 */
.tag-item.tag-fx-purple,
.tag.tag-fx-purple,
.tag-preview.tag-fx-purple {
    color: #cc66ff !important;
}
.tag-item.tag-fx-purple:hover,
.tag.tag-fx-purple:hover {
    color: #cc66ff;
    box-shadow: inset 0 0 0 1px #cc66ff, 0 0 6px rgba(204, 102, 255, 0.25);
}

/* 橙色 */
.tag-item.tag-fx-orange,
.tag.tag-fx-orange,
.tag-preview.tag-fx-orange {
    color: #ff9933 !important;
}
.tag-item.tag-fx-orange:hover,
.tag.tag-fx-orange:hover {
    color: #ff9933;
    box-shadow: inset 0 0 0 1px #ff9933, 0 0 6px rgba(255, 153, 51, 0.25);
}

/* 粉色 */
.tag-item.tag-fx-pink,
.tag.tag-fx-pink,
.tag-preview.tag-fx-pink {
    color: #ff66b2 !important;
}
.tag-item.tag-fx-pink:hover,
.tag.tag-fx-pink:hover {
    color: #ff66b2;
    box-shadow: inset 0 0 0 1px #ff66b2, 0 0 6px rgba(255, 102, 178, 0.25);
}

/* 青色 */
.tag-item.tag-fx-cyan,
.tag.tag-fx-cyan,
.tag-preview.tag-fx-cyan {
    color: #00cccc !important;
}
.tag-item.tag-fx-cyan:hover,
.tag.tag-fx-cyan:hover {
    color: #00cccc;
    box-shadow: inset 0 0 0 1px #00cccc, 0 0 6px rgba(0, 204, 204, 0.25);
}

/* 灰色 */
.tag-item.tag-fx-gray,
.tag.tag-fx-gray,
.tag-preview.tag-fx-gray {
    color: #888888 !important;
}
.tag-item.tag-fx-gray:hover,
.tag.tag-fx-gray:hover {
    color: #888888;
    box-shadow: inset 0 0 0 1px #888888, 0 0 6px rgba(136, 136, 136, 0.25);
}

/* 白色 */
.tag-item.tag-fx-white,
.tag.tag-fx-white,
.tag-preview.tag-fx-white {
    color: #ffffff !important;
}
.tag-item.tag-fx-white:hover,
.tag.tag-fx-white:hover {
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 6px rgba(255, 255, 255, 0.25);
}

/* ==================== 文字特殊效果 ==================== */

/* 彩虹文字效果 */
.tag-item.tag-fx-rainbow,
.tag.tag-fx-rainbow,
.tag-preview.tag-fx-rainbow {
    color: #ff3333 !important;
    background: linear-gradient(90deg, #ff3333, #ff9933, #ffcc00, #33ff66, #3399ff, #cc66ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: rainbow-text 3s linear infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保背景正确显示 */
    background-color: transparent;
}

@keyframes rainbow-text {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.tag-item.tag-fx-rainbow:hover,
.tag.tag-fx-rainbow:hover {
    background: linear-gradient(90deg, #ff3333, #ff9933, #ffcc00, #33ff66, #3399ff, #cc66ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    box-shadow: inset 0 0 0 1px var(--green), 0 0 8px rgba(255, 153, 51, 0.3);
}

/* 流光文字效果 */
.tag-item.tag-fx-flow,
.tag.tag-fx-flow,
.tag-preview.tag-fx-flow {
    background: linear-gradient(90deg, #00ff41, #00e5ff, #d2a8ff, #ffd700, #00ff41);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow-text 2s ease-in-out infinite;
    /* 确保背景正确显示 */
    background-color: transparent;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
}

@keyframes flow-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.tag-item.tag-fx-flow:hover,
.tag.tag-fx-flow:hover {
    background: linear-gradient(90deg, #00ff41, #00e5ff, #d2a8ff, #ffd700, #00ff41);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: inset 0 0 0 1px var(--cyan), 0 0 6px rgba(0, 229, 255, 0.25);
}

/* 逐字跳动文字效果 - 文字逐个上下跳动（波浪效果） */
.tag-item.tag-fx-jump,
.tag.tag-fx-jump,
.tag-preview.tag-fx-jump {
    display: inline-block;
    vertical-align: baseline;
}

.tag-item.tag-fx-jump .tag-text,
.tag.tag-fx-jump,
.tag-preview.tag-fx-jump {
    display: inline-block;
    animation: jump-text 0.6s ease-in-out infinite;
    animation-delay: calc(0.1s * (var(--char-index, 0)));
}

@keyframes jump-text {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* 呼吸效果 - 仅作用于文字透明度，不影响边框 */
.tag-item.tag-fx-pulse,
.tag.tag-fx-pulse,
.tag-preview.tag-fx-pulse {
    vertical-align: baseline;
}

.tag-item.tag-fx-pulse .tag-text,
.tag.tag-fx-pulse,
.tag-preview.tag-fx-pulse {
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tag-item.tag-fx-pulse:hover .tag-text,
.tag-item.tag-fx-pulse:hover,
.tag.tag-fx-pulse:hover,
.tag-preview.tag-fx-pulse:hover {
    animation: pulse-text 0.8s ease-in-out infinite;
}

/* ==================== 边框静态颜色特效 ==================== */

.tag-item.tag-fx-border-red {
    box-shadow: inset 0 0 0 1px #ff3333, 0 0 4px rgba(255, 51, 51, 0.15);
}
.tag-item.tag-fx-border-red:hover {
    box-shadow: inset 0 0 0 1px #ff3333, 0 0 6px rgba(255, 51, 51, 0.3);
}

.tag-item.tag-fx-border-blue {
    box-shadow: inset 0 0 0 1px #3399ff, 0 0 4px rgba(51, 153, 255, 0.15);
}
.tag-item.tag-fx-border-blue:hover {
    box-shadow: inset 0 0 0 1px #3399ff, 0 0 6px rgba(51, 153, 255, 0.3);
}

.tag-item.tag-fx-border-green {
    box-shadow: inset 0 0 0 1px #33ff66, 0 0 4px rgba(51, 255, 102, 0.15);
}
.tag-item.tag-fx-border-green:hover {
    box-shadow: inset 0 0 0 1px #33ff66, 0 0 6px rgba(51, 255, 102, 0.3);
}

.tag-item.tag-fx-border-yellow {
    box-shadow: inset 0 0 0 1px #ffcc00, 0 0 4px rgba(255, 204, 0, 0.15);
}
.tag-item.tag-fx-border-yellow:hover {
    box-shadow: inset 0 0 0 1px #ffcc00, 0 0 6px rgba(255, 204, 0, 0.3);
}

.tag-item.tag-fx-border-purple {
    box-shadow: inset 0 0 0 1px #cc66ff, 0 0 4px rgba(204, 102, 255, 0.15);
}
.tag-item.tag-fx-border-purple:hover {
    box-shadow: inset 0 0 0 1px #cc66ff, 0 0 6px rgba(204, 102, 255, 0.3);
}

.tag-item.tag-fx-border-orange {
    box-shadow: inset 0 0 0 1px #ff9933, 0 0 4px rgba(255, 153, 51, 0.15);
}
.tag-item.tag-fx-border-orange:hover {
    box-shadow: inset 0 0 0 1px #ff9933, 0 0 6px rgba(255, 153, 51, 0.3);
}

.tag-item.tag-fx-border-pink {
    box-shadow: inset 0 0 0 1px #ff66b2, 0 0 4px rgba(255, 102, 178, 0.15);
}
.tag-item.tag-fx-border-pink:hover {
    box-shadow: inset 0 0 0 1px #ff66b2, 0 0 6px rgba(255, 102, 178, 0.3);
}

.tag-item.tag-fx-border-cyan {
    box-shadow: inset 0 0 0 1px #00cccc, 0 0 4px rgba(0, 204, 204, 0.15);
}
.tag-item.tag-fx-border-cyan:hover {
    box-shadow: inset 0 0 0 1px #00cccc, 0 0 6px rgba(0, 204, 204, 0.3);
}

.tag-item.tag-fx-border-gray {
    box-shadow: inset 0 0 0 1px #888888, 0 0 4px rgba(136, 136, 136, 0.15);
}
.tag-item.tag-fx-border-gray:hover {
    box-shadow: inset 0 0 0 1px #888888, 0 0 6px rgba(136, 136, 136, 0.3);
}

.tag-item.tag-fx-border-white {
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 4px rgba(255, 255, 255, 0.15);
}
.tag-item.tag-fx-border-white:hover {
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 6px rgba(255, 255, 255, 0.3);
}

/* ==================== 边框特殊效果 ==================== */

/* 发光效果 - 仅 1-2px 范围 */
.tag-item.tag-fx-glow,
.tag.tag-fx-glow,
.tag-preview.tag-fx-glow {
    box-shadow: inset 0 0 0 1px var(--text), 0 0 4px rgba(255, 255, 255, 0.2);
    animation: glow-border 2s ease-in-out infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保高度固定 */
    line-height: 1.4;
}

@keyframes glow-border {
    0%, 100% {
        box-shadow: inset 0 0 0 1px var(--green), 0 0 4px rgba(0, 255, 65, 0.2);
    }
    50% {
        box-shadow: inset 0 0 0 1px var(--cyan), 0 0 6px rgba(0, 229, 255, 0.3);
    }
}

.tag-item.tag-fx-glow:hover {
    box-shadow: inset 0 0 0 1px var(--green), 0 0 6px rgba(0, 255, 65, 0.3);
}

/* 彩虹边框效果 */
.tag-item.tag-fx-border-rainbow,
.tag.tag-fx-border-rainbow,
.tag-preview.tag-fx-border-rainbow {
    animation: rainbow-border 3s linear infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
}

@keyframes rainbow-border {
    0% {
        box-shadow: inset 0 0 0 1px #ff3333, 0 0 4px rgba(255, 51, 51, 0.25);
    }
    20% {
        box-shadow: inset 0 0 0 1px #ff9933, 0 0 4px rgba(255, 153, 51, 0.25);
    }
    40% {
        box-shadow: inset 0 0 0 1px #ffcc00, 0 0 4px rgba(255, 204, 0, 0.25);
    }
    60% {
        box-shadow: inset 0 0 0 1px #33ff66, 0 0 4px rgba(51, 255, 102, 0.25);
    }
    80% {
        box-shadow: inset 0 0 0 1px #3399ff, 0 0 4px rgba(51, 153, 255, 0.25);
    }
    100% {
        box-shadow: inset 0 0 0 1px #ff3333, 0 0 4px rgba(255, 51, 51, 0.25);
    }
}

/* 动态边框流光效果 */
.tag-item.tag-fx-border-flow,
.tag.tag-fx-border-flow,
.tag-preview.tag-fx-border-flow {
    animation: border-flow 2s linear infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
}

@keyframes border-flow {
    0% {
        box-shadow: inset 0 0 0 1px #00ff41, 0 0 4px rgba(0, 255, 65, 0.3);
    }
    25% {
        box-shadow: inset 0 0 0 1px #00e5ff, 0 0 4px rgba(0, 229, 255, 0.3);
    }
    50% {
        box-shadow: inset 0 0 0 1px #d2a8ff, 0 0 4px rgba(210, 168, 255, 0.3);
    }
    75% {
        box-shadow: inset 0 0 0 1px #ffd700, 0 0 4px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: inset 0 0 0 1px #00ff41, 0 0 4px rgba(0, 255, 65, 0.3);
    }
}

/* 边框呼吸效果 - 边框亮度和外发光同步呼吸 */
.tag-item.tag-fx-border-pulse,
.tag.tag-fx-border-pulse,
.tag-preview.tag-fx-border-pulse {
    animation: border-pulse 1.5s ease-in-out infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保边框特效不受基础样式干扰 */
    box-shadow: inset 0 0 0 1px rgba(204, 102, 255, 0.6), 0 0 4px rgba(204, 102, 255, 0.3);
}

@keyframes border-pulse {
    0%, 100% {
        /* 边框暗 + 外发光收缩 */
        box-shadow: inset 0 0 0 1px rgba(204, 102, 255, 0.3), 0 0 2px rgba(204, 102, 255, 0.15);
    }
    50% {
        /* 边框亮 + 外发光扩散 */
        box-shadow: inset 0 0 0 1px rgba(204, 102, 255, 1), 0 0 8px rgba(204, 102, 255, 0.5);
    }
}

/* 跑马灯边框效果 - 使用渐变边框代替伪元素，修复上浮问题 */
.tag-item.tag-fx-marquee,
.tag.tag-fx-marquee,
.tag-preview.tag-fx-marquee {
    border: none;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(90deg,
            #ff3333, #ff9933, #ffcc00, #33ff66,
            #3399ff, #cc66ff, #ff3333) border-box;
    background-size: 100% 100%, 200% 100%;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    animation: marquee-border-color 2s linear infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保高度固定 */
    line-height: 1.4;
}

@keyframes marquee-border-color {
    0% { background-size: 100% 100%, 200% 100%; background-position: 0 0, 0 0; }
    50% { background-position: 0 0, 100% 0; }
    100% { background-size: 100% 100%, 200% 100%; background-position: 0 0, 0 0; }
}

.tag-item.tag-fx-marquee:hover {
    background:
        rgba(0, 255, 65, 0.05) padding-box,
        linear-gradient(90deg,
            #ff3333, #ff9933, #ffcc00, #33ff66,
            #3399ff, #cc66ff, #ff3333) border-box;
    background-size: 100% 100%, 200% 100%;
    border-width: 1px;
    border-style: solid;
    animation: marquee-border-color 1s linear infinite;
}

/* ==================== 整体透明特效（可配合文字/边框） ==================== */

/* 玻璃流光效果 - 光线从视窗外右侧划入，从左侧划出 */
.tag-item.tag-fx-glass,
.tag.tag-fx-glass,
.tag-preview.tag-fx-glass {
    background-color: rgba(255, 255, 255, 0.03);
    background-image:
        linear-gradient(
            60deg,
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.2) 42%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.2) 58%,
            transparent 70%,
            transparent 100%
        );
    background-size: 400% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.25);
    animation: glass-shine-slow 2s linear infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保高度固定 */
    line-height: 1.4;
}

/* 光线从右侧视窗外划入，划过整个按钮，从左侧视窗外划出 */
@keyframes glass-shine-slow {
    0% { background-position: 100% 0; }
    100% { background-position: -200% 0; }
}

/* 光线快速划动版本（hover 时使用） */
@keyframes glass-shine-fast {
    0% { background-position: 100% 0; }
    100% { background-position: -200% 0; }
}

.tag-item.tag-fx-glass:hover {
    background-color: rgba(0, 229, 255, 0.05);
    border-color: rgba(0, 229, 255, 0.4);
    animation: glass-shine-fast 0.8s linear infinite;
}

/* ==================== 广告灯边框特效 ==================== */

/* 广告灯边框效果 - SVG 彩色虚线围绕旋转 */
.tag-item.tag-fx-adlight {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 1;
    vertical-align: baseline;
    line-height: 1.4;
    background: var(--bg-card);
}

/* SVG 容器绝对定位，完美覆盖父级 */
.tag-item.tag-fx-adlight .adlight-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

/* SVG 矩形边框样式 */
.tag-item.tag-fx-adlight .adlight-rect {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 6, 4;
    stroke-dashoffset: 0;
    animation: adlight-flow 3s linear infinite;
    /* 彩色渐变边框 */
    stroke: url(#adlight-gradient);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

/* 鼠标悬停：流动速度变快 */
.tag-item.tag-fx-adlight:hover .adlight-rect {
    animation-duration: 0.8s;
    filter: drop-shadow(0 0 4px rgba(255, 102, 0, 0.6));
}

/* adlight hover 时禁用默认绿色边框效果 */
.tag-item.tag-fx-adlight:hover {
    border-color: transparent !important;
    color: var(--text) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: 2;
}

@keyframes adlight-flow {
    to {
        stroke-dashoffset: -20;
    }
}

/* ==================== 整体覆盖型特效（独占显示） ==================== */

/* 霓虹灯效果 - 完全覆盖文字和边框 */
.tag-item.tag-fx-neon,
.tag.tag-fx-neon,
.tag-preview.tag-fx-neon {
    color: #fff !important;
    background: #1a1a2e !important;
    border: none !important;
    box-shadow:
        0 0 3px #ff00ff,
        0 0 6px #ff00ff,
        inset 0 0 3px rgba(255, 0, 255, 0.3);
    animation: neon-flicker 3s ease-in-out infinite;
    text-shadow:
        0 0 2px #ff00ff,
        0 0 4px #ff00ff;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
    /* 确保高度固定 */
    line-height: 1.4;
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        box-shadow:
            0 0 3px #ff00ff,
            0 0 6px #ff00ff,
            inset 0 0 3px rgba(255, 0, 255, 0.3);
        text-shadow:
            0 0 2px #ff00ff,
            0 0 4px #ff00ff;
    }
    20%, 24%, 55% {
        box-shadow:
            0 0 1px #ff00ff,
            0 0 2px #ff00ff,
            inset 0 0 2px rgba(255, 0, 255, 0.2);
        text-shadow:
            0 0 1px #ff00ff;
    }
}

.tag-item.tag-fx-neon:hover {
    box-shadow:
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 0 15px #00ffff,
        inset 0 0 5px rgba(255, 0, 255, 0.4);
    text-shadow:
        0 0 3px #ff00ff,
        0 0 6px #ff00ff,
        0 0 8px #00ffff;
}

/* ==================== 整体动作特效（可与其他颜色特效组合） ==================== */

/* 整体跳动效果 - 整个标签作为一个整体放大缩小跳动 */
.tag-item.tag-fx-bounce,
.tag.tag-fx-bounce,
.tag-preview.tag-fx-bounce {
    animation: bounce-whole 0.6s ease-in-out infinite;
    /* 明确指定垂直对齐方式防止上浮 */
    vertical-align: baseline;
}

@keyframes bounce-whole {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tag-item.tag-fx-bounce:hover {
    animation: bounce-whole-fast 0.3s ease-in-out infinite;
}

@keyframes bounce-whole-fast {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ==================== 字体样式特效 ==================== */

/* 粗体 */
.tag-item.tag-fx-bold,
.tag.tag-fx-bold,
.tag-preview.tag-fx-bold {
    font-weight: bold !important;
}

/* 斜体 */
.tag-item.tag-fx-italic,
.tag.tag-fx-italic,
.tag-preview.tag-fx-italic {
    font-style: italic !important;
}

/* 下划线 - 仅作用于文字部分 */
.tag-item.tag-fx-underline,
.tag.tag-fx-underline,
.tag-preview.tag-fx-underline {
    text-decoration: none !important;
}

.tag-item.tag-fx-underline .tag-text,
.tag.tag-fx-underline,
.tag-preview.tag-fx-underline {
    text-decoration: underline !important;
}

/* ==================== 组合特效示例 ==================== */

/* 蓝色 + 边框流光 */
.tag-item.tag-fx-blue.tag-fx-border-flow,
.tag.tag-fx-blue.tag-fx-border-flow,
.tag-preview.tag-fx-blue.tag-fx-border-flow {
    color: #3399ff !important;
}

/* 紫色 + 斜体 */
.tag-item.tag-fx-purple.tag-fx-italic,
.tag.tag-fx-purple.tag-fx-italic,
.tag-preview.tag-fx-purple.tag-fx-italic {
    color: #cc66ff !important;
    font-style: italic;
}

/* 玻璃 + 边框发光（组合效果） */
.tag-item.tag-fx-glass.tag-fx-glow,
.tag.tag-fx-glass.tag-fx-glow,
.tag-preview.tag-fx-glass.tag-fx-glow {
    box-shadow: inset 0 0 0 1px var(--cyan), 0 0 4px rgba(0, 229, 255, 0.2);
    animation: glass-glow-shine 3s ease-in-out infinite, glow-border 2s ease-in-out infinite;
}

@keyframes glass-glow-shine {
    0% { background-position: 0 0, -100% 0; }
    50% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 100% 0; }
}

/* 文章详情页和预览页的特殊处理 */
.tag.tag-fx-rainbow,
.tag-preview.tag-fx-rainbow {
    -webkit-text-fill-color: #ff3333;
}

.tag.tag-fx-flow,
.tag-preview.tag-fx-flow {
    background: linear-gradient(90deg, #00ff41, #00e5ff, #d2a8ff, #ffd700, #00ff41);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tag.tag-fx-bounce,
.tag-preview.tag-fx-bounce {
    display: inline;
}

.tag.tag-fx-pulse,
.tag-preview.tag-fx-pulse {
    display: inline;
}

/* jump 特效：逐字跳动效果在文章详情页和预览页需要特殊处理 */
.tag.tag-fx-jump,
.tag-preview.tag-fx-jump {
    display: inline;
}

.tag.tag-fx-jump .tag-text,
.tag-preview.tag-fx-jump .tag-text {
    display: inline-block;
    animation: jump-text 0.6s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--char-index, 0));
}

.tag.tag-fx-neon,
.tag-preview.tag-fx-neon {
    display: inline-block;
}

/* 文章详情页的霓虹效果保持一致 */
.tag.tag-fx-neon {
    background: #1a1a2e !important;
    border: none !important;
    box-shadow:
        0 0 2px #ff00ff,
        0 0 4px #ff00ff;
}

/* 确保文章页的标签下划线不影响中括号 */
.post-detail .file-body .meta-line .tag.tag-fx-underline {
    text-decoration: underline;
}

/* ==================== 标签页搜索功能样式 ==================== */

/* 搜索容器 */
.tag-search-wrapper {
    margin-bottom: 24px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
}

.tag-search-input {
    width: 100%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--green);
    color: var(--text);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
    transition: all 0.2s ease;
    caret-color: var(--green);
}

.tag-search-input::placeholder {
    color: var(--gray);
}

.tag-search-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

/* 标签容器 - Flex 布局支持换行 */
.terminal-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
    min-height: 40px;
    transition: height 300ms ease;
}

/* 外层布局盒：只操作 transform 和 opacity，与特效完全隔离 */
.tag-layout-box {
    transform-origin: center center;
    /* 精致弹性曲线：渐隐使用标准曲线，出现使用带回弹的曲线 */
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
    /* 移除额外间距，让标签紧凑排列 */
    margin: 0;
}

/* 状态1：正在消失（渐隐、缩小） */
.tag-layout-box.is-exiting {
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
}

/* 状态2：完全隐藏（不占 Flex 空间） */
.tag-layout-box.is-hidden {
    display: none !important;
}

/* 移动中状态：当应用 FLIP 过渡时激活 */
.tag-layout-box.is-moving {
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 中层特效容器：承载原有特效样式 */
.tag-effect-hub {
    display: inline-block;
    vertical-align: baseline;
}

/* 空结果提示 - 系统信息风格 */
.terminal-no-results {
    color: var(--text);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 14px;
    padding: 20px 0;
    width: 100%;
    line-height: 1.6;
}

.terminal-no-results .error-bracket {
    color: var(--red);
    font-weight: bold;
}

.terminal-no-results .search-keyword {
    color: var(--yellow);
}

.terminal-no-results .blink-cursor {
    color: var(--green);
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 激活 will-change 的状态类 - 仅在输入框聚焦时开启 */
.tags-active .tag-layout-box {
    will-change: transform, opacity;
}