@font-face {
    font-family: 'Fusion Pixel Font';
    src: url('/fusion-pixel-10px-monospaced-zh_hans.otf.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Misaki Gothic';
    src: url('https://cdn.jsdelivr.net/npm/misaki-gothic@1.0.0/dist/MisakiGothic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'EchoScan';
    src: url('data:font/ttf;base64,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') format('truetype');
    font-display: swap;
}


/* =========================
   基础样式重置与核心变量
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 统一绿色系配色方案 */
    --primary-gradient-start: #2196F3;
    --primary-gradient-end: #8BC34A;
    --primary-shadow-color: #4caf334d;
    --primary-light: #4CAF50;
    --primary-medium: #388E3C;
    --primary-dark: #2E7D32;
    
    /* 风险状态配色 */
    --risk-normal-border: #138385;
    --risk-normal-title: #ffffff;
    --risk-normal-gradient-start: #138385;
    --risk-normal-gradient-end: #8BC34A;
    --risk-normal-shadow: #4caf334d;
    
    /* 基础尺寸 */
    --base-spacing: 1.5rem;
    --border-radius: 15px;
    --card-min-width: 320px;
    --card-max-width: 500px;
    --card-dynamic-padding: 2rem;
    --grid-gap: 1.5rem;
}

/* =========================
   页面主体样式
   ========================= */
body {
    background: #000;
    color: #fff;
    font-family: 'Arial', 'Microsoft YaHei', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-height: 1.6;
}


/* =========================
   自定义滚动条样式
   ========================= */
/* WebKit内核浏览器滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 15, 15, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, 
        var(--risk-normal-gradient-start), 
        var(--risk-normal-gradient-end));
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, 
        #0ea5a7, 
        #9fd663);
    box-shadow: 0 0 8px var(--primary-shadow-color);
    transform: scale(1.1);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, 
        var(--primary-medium), 
        var(--primary-light));
}

::-webkit-scrollbar-corner {
    background: rgba(15, 15, 15, 0.8);
}

/* Firefox滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: #138385 rgba(15, 15, 15, 0.8);
}

/* =========================
   粒子动画背景
   ========================= */
.particle-container {
    position: fixed;
    top: 45vh;  /* 初始位置在45vh */
    left: 0;
    width: 100%;
    height: 55vh;  /* 相应调整高度 */
    pointer-events: none;
    z-index: 1;
    filter: blur(1.5px);
    transition: top 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
}



@keyframes pixelGlow {
    0% { 
        filter: brightness(1) contrast(1);
    }
    100% { 
        filter: brightness(1.2) contrast(1.1);
    }
}

@keyframes terminalBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes glitchEffect {
    0%, 85%, 100% { 
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    86% { 
        transform: translate(2px, -1px);
        filter: hue-rotate(15deg);
        text-shadow: 
            3px 0 0 #ff0080,
            -3px 0 0 #00ff80,
            0 3px 0 #8000ff,
            0 -3px 0 #ff8000;
    }
    87% { 
        transform: translate(-2px, 1px);
        filter: hue-rotate(-15deg);
    }
    88% { 
        transform: translate(1px, -2px);
        filter: hue-rotate(10deg);
    }
    89% { 
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

/* Matrix效果样式 */
.fingerprint-warning {
    font-family: 'VT323', 'Fusion Pixel Font', 'Misaki Gothic', 'Courier New', monospace !important;
    letter-spacing: 2px !important;
    color: #00ff41 !important;
    text-shadow: 0 0 10px #00ff41 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    animation: none !important;
}

/* 红色警告效果 - 针对 hero-subtitle 的特殊样式 */
.hero-subtitle.fingerprint-warning {
    color: #ff4444 !important;
}

@keyframes charMorph {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.7; 
        filter: brightness(1.3);
    }
}

/* =========================
   指纹检测区域
   ========================= */
.fingerprint-section {
    padding: 1rem 2rem 80rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 4rem;
    background: linear-gradient(45deg, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
   分类容器 - 统一绿色配色
   ========================= */
.category-container {
    margin-bottom: 5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: categoryFadeIn 0.8s ease-out forwards;
}

.category-container:nth-child(2) { animation-delay: 0.2s; }
.category-container:nth-child(3) { animation-delay: 0.4s; }
.category-container:nth-child(4) { animation-delay: 0.6s; }

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}


.category-info {
    flex: 1;
}

/* 分类标题使用像素字体 */
.category-title {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1rem; /* 增加字符间距以配合像素字体 */
}

/* 分类描述使用像素字体 */
.category-description {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.05rem; /* 轻微增加字符间距 */
}

/* 分类图标保持原有设置，但可以调整字体以确保emoji正确显示 */
.category-icon {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    overflow: visible; /* 确保3D内容不溢出 */
}

/* 3D模型canvas适配 */
.category-icon canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
}

.category-description {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.4;
}

.category-stats {
    text-align: right;
    color: #666;
    font-size: 0.9rem;
}

/* 统一配色 - 所有分类使用绿色系 */
/* 或者更极简的纯边框方案 */



.category-basic .category-title {
    color: #0e89d5;
}

.category-system .category-title {
    color: #f83513;
}

.category-advanced .category-title {
    color: #f42ef1;
}

/* =========================
   指纹卡片 - 移除所有高风险特效
   ========================= */
.fingerprint-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

/* TODO:动态生成的卡片backdrop-filter: blur(7px) saturate(100%) !important;效果不会被应用，尝试在card.js强制设置也不行。
静态生成的卡片没问题，
@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        <!-- 指纹信息区域 -->
        <section class="fingerprint-section">
            <!-- <h2 class="section-title" data-i18n="page.analysis.title"></h2> -->
                <div class="tech-cube-container">
                </div>
            
            <!-- 基础环境检测类 -->
            <!-- 测试卡片区域 -->
<div class="test-card-section" style="padding: 2rem; margin-bottom: 3rem;">
    <h3 style="color: #fff; margin-bottom: 1rem;">Backdrop-filter 测试卡片</h3>
    <div class="fingerprint-grid">
        <!-- 静态测试卡片 -->
        <div class="fingerprint-card test-card" data-detector="test-static">
            <div class="card-header">
                <div class="card-title">静态测试卡片</div>
                <div class="risk-indicator" style="display: none;">
                    <span class="risk-badge">风险</span>
                </div>
            </div>
            <div class="card-content">
                <div class="card-fields">
                    <div class="result-row">
                        <span class="result-key">测试项1:</span>
                        <span class="result-value">backdrop-filter效果测试</span>
                    </div>
                    <div class="result-row">
                        <span class="result-key">测试项2:</span>
                        <span class="result-value">blur(7px) saturate(100%)</span>
                    </div>
                    <div class="result-row">
                        <span class="result-key">测试项3:</span>
                        <span class="result-value">静态HTML渲染</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@
TODO:
.fingerprint-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
    padding: 2rem;
    backdrop-filter: blur(7px) saturate(100%) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: cardFadeIn 0.6s ease-out forwards;
    width: var(--card-min-width);
    cursor: pointer;
    display: flex;                  
    flex-direction: column;        
    justify-content: space-between; 
} 
*/


.fingerprint-card {
    background: rgba(15,15,15,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: cardFadeIn 0.6s ease-out forwards;
    min-width: var(--card-min-width);
    max-width: var(--card-max-width);
    width: auto;    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fingerprint-card:nth-child(odd) { animation-delay: 0.1s; }
.fingerprint-card:nth-child(even) { animation-delay: 0.2s; }

/* 渐变边框系统 - 正常状态悬停效果 */
.fingerprint-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 2.4s ease;
    pointer-events: none;
    border-radius: var(--border-radius);
}
.fingerprint-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius);
    padding: 1px;
    opacity: 0;
    transition: opacity 2.4s ease;
    pointer-events: none;
    background: linear-gradient(to right, var(--risk-normal-gradient-start), var(--risk-normal-gradient-end));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* 卡片悬停效果 - 保持原有的绿色边框效果 */
.fingerprint-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 20px 40px var(--risk-normal-shadow);
}

.fingerprint-card:hover::before,
.fingerprint-card:hover::after {
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* 延迟消失效果 */
.fingerprint-card.hover-leave::before,
.fingerprint-card.hover-leave::after {
    transition: opacity 2s ease;
    opacity: 0;
}

/* =========================
   风险状态样式系统（仅保留标题颜色）
   ========================= */

/* 正常状态标题 */
.fingerprint-card .card-title {
    color: var(--risk-normal-title);
    transition: color 0.3s ease;
}

/* 🔧 低信任状态标题 - 最高优先级，覆盖所有其他状态 */
.fingerprint-card.low-trust-title .card-title {
    color: #f44336 !important;
}

/* =========================
   高风险状态样式 - 红色数据流 + 内阴影边框
   ========================= */

/* 🔴 红色数据流容器 */
.red-data-stream-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
}

/* 🔴 红色数据流行 */
.red-data-stream-row {
    position: absolute;
    left: 0;
    width: 100%;
    height: 18px;
    color: #ab0d02;
    font-size: 11px;
    font-family: 'Fusion Pixel Font','Courier New', 'VT323' , monospace;
    white-space: nowrap;
    opacity: 0;
    animation: redDataStreamFlow 3s ease-out infinite;
    text-shadow: 0 0 8px rgba(255, 0, 64, 0.8);
    line-height: 18px;
    filter: blur(1.5px);
}

/* 为不同行设置不同的延迟 */
.red-data-stream-row:nth-child(1) { animation-delay: 0s; }
.red-data-stream-row:nth-child(2) { animation-delay: 0.1s; }
.red-data-stream-row:nth-child(3) { animation-delay: 0.2s; }
.red-data-stream-row:nth-child(4) { animation-delay: 0.3s; }
.red-data-stream-row:nth-child(5) { animation-delay: 0.4s; }
.red-data-stream-row:nth-child(6) { animation-delay: 0.5s; }
.red-data-stream-row:nth-child(7) { animation-delay: 0.6s; }
.red-data-stream-row:nth-child(8) { animation-delay: 0.7s; }
.red-data-stream-row:nth-child(9) { animation-delay: 0.8s; }
.red-data-stream-row:nth-child(10) { animation-delay: 0.9s; }

/* 红色数据流动画 */
@keyframes redDataStreamFlow {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    15% {
        opacity: 0.8;
    }
    85% {
        opacity: 0.8;
        transform: translateX(0%);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* 增加一些随机的闪烁效果 */
.red-data-stream-row:nth-child(odd) {
    animation-duration: 3.2s;
}

.red-data-stream-row:nth-child(3n) {
    animation-duration: 2.8s;
}

/* 🔴 高风险状态内阴影边框效果 */
.fingerprint-card.high-risk-border {
    border: 1px solid rgba(208, 6, 6, 0.655) !important;
    box-shadow: inset 0 0 15px rgba(255, 107, 132, 0.08),
                0 0 10px rgba(255, 107, 132, 0.15) !important;
    transition: all 0.3s ease;
}

.fingerprint-card.high-risk-border:hover {
    border-color: rgba(207, 9, 9, 0.941) !important;
    box-shadow: inset 0 0 20px rgba(255, 71, 87, 0.12),
                0 0 20px rgba(255, 71, 87, 0.25) !important;
}

/* 高风险状态下按钮的红色边框效果 */
.fingerprint-card.high-risk-state .card-button::after {
    background: linear-gradient(to right, 
        rgba(244, 67, 54, 0.8) 0%, 
        rgba(255, 87, 34, 0.8) 100%) !important;  /* 🔧 红色渐变边框 */
    transition: opacity 0.3s ease;
}



.fingerprint-card.high-risk-state .card-button:hover {
    border-color: rgba(244, 67, 54, 0.9) !important;
    box-shadow: inset 0 0 12px rgba(244, 67, 54, 0.25) !important;
    background: rgba(244, 67, 54, 0.1) !important;
}

/* 高风险状态组合效果 - 覆盖原有悬停效果 */
.fingerprint-card.high-risk-state {
    position: relative;
    z-index: 10;
}

.fingerprint-card.high-risk-state::before,
.fingerprint-card.high-risk-state::after {
    opacity: 0 !important;
}

/* 高风险状态永久高亮效果 */
.fingerprint-card.high-risk-permanent-highlight {
    transform: translateY(-5px) scale(1.02) !important;
    z-index: 10 !important;
}

/* 风险指示器 */
.risk-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: none;
    z-index: 2;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.risk-indicator.risk-low {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
    border-color: #4CAF50;
}

.risk-indicator.risk-medium {
    background: rgba(255, 152, 0, 0.3);
    color: #FF9800;
    border-color: #FF9800;
}

.risk-indicator.risk-high {
    background: rgba(244, 67, 54, 0.3);
    color: #f44336;
    border-color: #f44336;
    animation: riskIndicatorPulse 2s ease-in-out infinite;
}

@keyframes riskIndicatorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ========== 数据流特效样式 - 仅保留点击效果 ========== */
@keyframes dataGlow {
    0%, 100% { 
        background: rgba(255,255,255,0.05); 
        border-color: rgba(255,255,255,0.1); 
    }
    50% { 
        background: rgba(0, 255, 133, 0.05); 
        border-color: rgba(0, 255, 133, 0.3); 
    }
}

.data-stream-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.data-stream-row {
    position: absolute;
    width: 400%;
    height: 1rem;
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #00ff85;
    white-space: nowrap;
    text-shadow: 0 0 8px #00ff85;
    opacity: 0;
    animation: streamFlow 0.8s ease-out;
}

@keyframes streamFlow {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateX(25%); opacity: 0; }
}

/* =========================
   卡片内容
   ========================= */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}


.card-header .risk-indicator {
    display: none;
    align-items: center;
    gap: 0.4rem;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
}

.card-header .risk-indicator.active {
    display: flex;
}

.card-title {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    font-size: 1.3rem;
    font-weight: 500;
    color: #fff;
    transition: color 0.3s ease;
    letter-spacing: 0.1rem;
}

.proxy-badge {
    color: #ff4d4f;
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    font-size: 1rem;
    letter-spacing: 0.06rem;
    text-transform: none;
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.proxy-badge::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,77,79,0.9) 0%, rgba(255,77,79,0.2) 70%, rgba(255,77,79,0) 100%);
    box-shadow: 0 0 6px rgba(255, 77, 79, 0.5);
}

.card-content {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    min-height: 120px;
}

.card-fields {
    margin-bottom: 0.8rem;
}

.card-buttons {
    margin-top: 0.4rem;
}

.placeholder-text {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 2rem 0;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.result-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.result-key {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 0.8rem;
    min-width: 60px;
    letter-spacing: 0.05rem;
}

.result-value {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    color: #fff;
    font-size: 0.8rem;
    text-align: right;
    font-weight: 500;
    flex: 1;
    word-break: break-word;
    letter-spacing: 0.03rem;
}

/* =========================
   呼吸光效条
   ========================= */
.breathing-glow-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 2px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(75, 172, 254, 0.6));
}

.breathing-glow-bar.visible {
    opacity: 1;
}

.gradient-line {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 1px;
    background: linear-gradient(90deg, 
        #4facfe 0%, 
        #00f2fe 25%, 
        #43e97b 50%, 
        #38f9d7 75%, 
        #4facfe 100%);
    background-size: 200% 100%;
    animation: breathingFlow 4s ease-in-out infinite;
}

.breathing-glow-bar:hover .gradient-line {
    transform: scaleY(8);
    filter: brightness(1.4) saturate(1.2);
    box-shadow: 0 0 20px rgba(75, 172, 254, 0.8);
}

/* =========================
   数据流风格卡片按钮系统
   ========================= */

.card-button {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;              /* 🔧 增加内边距让按钮更饱满 */
    color: #ffffff;
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace;
    font-size: 0.75rem;             /* 🔧 略微增大字体 */
    font-weight: 400;               /* 🔧 调整字重 */
    text-transform: uppercase;
    letter-spacing: 2px;            /* 🔧 减少字间距 */
    cursor: pointer;
    backdrop-filter: none;
    transition: all 0.5s ease;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;                    /* 🔧 调整图标与文字间距 */
    margin-top: auto;               /* 🔧 自动推到底部 */
    margin-bottom: 1rem;            /* 🔧 与卡片底部保持合适距离 */
    width: calc(100% - 2rem);       /* 🔧 占满卡片宽度，左右各留1rem */
    margin-left: 1rem;              /* 🔧 左边距 */
    margin-right: 1rem;             /* 🔧 右边距 */
    min-height: 36px;               /* 🔧 最小高度确保触摸友好 */
}

/* 在 .card-button 样式后面添加 */
.card-button::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1px;
    opacity: 0;  /* ← 默认隐藏 */
    transition: opacity 2.5s ease;
    pointer-events: none;
    background: linear-gradient(to right, var(--risk-normal-gradient-start), var(--risk-normal-gradient-end));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}


/* 数据流效果核心 */
.card-button::before {
    content: 'ozzzzzxzzzzzo';
    position: absolute;
    top: 0;
    left: -200%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(19, 131, 133, 0.1) 25%, 
        rgba(19, 131, 133, 0.8) 40%,
        rgba(139, 195, 74, 0.8) 60%,
        rgba(139, 195, 74, 0.1) 75%, 
        transparent 100%);  
    color: #00ff85;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    font-family: 'Fusion Pixel Font', 'Misaki Gothic', 'VT323', monospace;  /* ← 修改后 */
    white-space: nowrap;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* 悬停时激活数据流 */
.card-button:hover {
    border: none;  /* ← 确保无边框 */
    color: #fff;
    background: rgba(19, 131, 133, 0.2);
    text-shadow: 0 0 10px #4facfe;
    transform: translateY(-2px);
}

/* 悬浮时显示渐变边框 */
.card-button:hover::after {
    opacity: 1;  /* ← 悬浮时显示边框 */
    transition: opacity 0.8s ease;
}

.card-button:hover::before {
    left: -100%;
    opacity: 1;
    animation: dataFlow 6s linear infinite;
}

/* 数据流动画 */
@keyframes dataFlow {
    0% { 
        transform: translateX(-100%);  /* 从更左边开始 */
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% { 
        transform: translateX(50%);   /* 移动更远，完全穿越 */
        opacity: 0;
    }
}
/* 按钮内容层级 */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 0;
    filter: drop-shadow(0 0 4px currentColor);
    transition: all 0.3s ease;
}
.button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.button-icon .icon-spinner {
    animation: button-icon-spin 1s linear infinite;
    transform-origin: 50% 50%;
}
.button-icon .spinner-head {
    stroke-dasharray: 26;
    stroke-dashoffset: 15;
}

@keyframes button-icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.button-text {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    font-size: inherit;
    line-height: 1.2;
}

.card-button:hover .button-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px currentColor);
}

/* 点击效果 */
.card-button:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

/* 数据流按钮特殊状态 */
.card-button.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 133, 0.4), 
        transparent);
    z-index: 1;
    animation: dataStreamFlash 1.5s ease-in-out;
}

@keyframes dataStreamFlash {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
.lang-flag {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* =========================
   动画定义
   ========================= */
@keyframes titleGlow {
    0% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    100% { 
        opacity: 1; 
        transform: scale(1.02);
        filter: drop-shadow(0 0 15px rgba(79, 172, 254, 0.7));
    }
}

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

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes categoryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes breathingFlow {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.6;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }
}

/* ========== 三色加载特效样式 ========== */
/* 加载状态容器 */
.loading-state {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.loading-state.fade-out {
    opacity: 0;
}

/* ========== 蓝色：八条纵线递延脉冲 ========== */
.blue-lines-loader {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blue-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(14, 137, 213, 0.8) 20%,
        rgba(79, 172, 254, 0.9) 50%,
        rgba(14, 137, 213, 0.8) 80%,
        transparent 100%);
    border-radius: 2px;
    filter: blur(0.5px) drop-shadow(0 0 8px rgba(14, 137, 213, 0.6));
    animation: bluePulse 3s ease-in-out infinite;
}

.blue-line:nth-child(1) { left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.blue-line:nth-child(2) { left: 75%; transform: translateX(-50%) rotate(22.5deg); animation-delay: 0.2s; }
.blue-line:nth-child(3) { left: 85%; transform: translateX(-50%) rotate(45deg); animation-delay: 0.4s; }
.blue-line:nth-child(4) { left: 75%; transform: translateX(-50%) rotate(67.5deg); animation-delay: 0.6s; }
.blue-line:nth-child(5) { left: 50%; transform: translateX(-50%) rotate(90deg); animation-delay: 0.8s; }
.blue-line:nth-child(6) { left: 25%; transform: translateX(-50%) rotate(112.5deg); animation-delay: 1s; }
.blue-line:nth-child(7) { left: 15%; transform: translateX(-50%) rotate(135deg); animation-delay: 1.2s; }
.blue-line:nth-child(8) { left: 25%; transform: translateX(-50%) rotate(157.5deg); animation-delay: 1.4s; }

@keyframes bluePulse {
    0%, 100% { 
        opacity: 0.4;
        height: 80%;
        top: 10%;
        filter: blur(0.5px) drop-shadow(0 0 8px rgba(14, 137, 213, 0.4));
    }
    50% { 
        opacity: 1;
        height: 100%;
        top: 0%;
        filter: blur(0.3px) drop-shadow(0 0 15px rgba(14, 137, 213, 0.9));
    }
}

/* ========== 红色：晶体结构共振 ========== */
.red-crystal-loader {
    width: 70px;
    height: 70px;
    position: relative;
    transform: rotate(45deg);
}

.red-crystal-facet {
    position: absolute;
    border: 1px solid rgba(248, 53, 19, 0.6);
    background: rgba(248, 53, 19, 0.1);
    animation: redCrystalGlow 2s ease-in-out infinite;
}

.red-crystal-facet:nth-child(1) {
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
    animation-delay: 0s;
    filter: drop-shadow(0 0 8px rgba(248, 53, 19, 0.6));
}

.red-crystal-facet:nth-child(2) {
    width: 20px;
    height: 20px;
    top: 8px;
    left: 25px;
    animation-delay: 0.2s;
}

.red-crystal-facet:nth-child(3) {
    width: 20px;
    height: 20px;
    bottom: 8px;
    left: 25px;
    animation-delay: 0.4s;
}

.red-crystal-facet:nth-child(4) {
    width: 20px;
    height: 20px;
    top: 25px;
    left: 8px;
    animation-delay: 0.6s;
}

.red-crystal-facet:nth-child(5) {
    width: 20px;
    height: 20px;
    top: 25px;
    right: 8px;
    animation-delay: 0.8s;
}

@keyframes redCrystalGlow {
    0%, 100% {
        border-color: rgba(248, 53, 19, 0.4);
        background: rgba(248, 53, 19, 0.05);
        transform: scale(1);
    }
    50% {
        border-color: rgba(248, 53, 19, 1);
        background: rgba(248, 53, 19, 0.3);
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(248, 53, 19, 0.8));
    }
}

/* ========== 紫色：多层波纹条 ========== */
.purple-ripple-loader {
    width: 70px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ripple-bar {
    position: absolute;
    width: 3px;
    background: linear-gradient(to bottom, 
        transparent,
        rgba(244, 46, 241, 0.4),
        rgba(244, 46, 241, 1),
        rgba(244, 46, 241, 0.4),
        transparent);
    border-radius: 2px;
    filter: blur(0.3px) drop-shadow(0 0 8px rgba(244, 46, 241, 0.8));
    animation: rippleBarPulse 3s ease-in-out infinite;
    transform-origin: center;
}

.ripple-bar:nth-child(1) { height: 15px; left: 20px; animation-delay: 0s; }
.ripple-bar:nth-child(2) { height: 25px; left: 26px; animation-delay: 0.2s; }
.ripple-bar:nth-child(3) { height: 35px; left: 32px; animation-delay: 0.4s; }
.ripple-bar:nth-child(4) { height: 45px; left: 38px; animation-delay: 0.6s; }
.ripple-bar:nth-child(5) { height: 35px; left: 44px; animation-delay: 0.8s; }
.ripple-bar:nth-child(6) { height: 25px; left: 50px; animation-delay: 1s; }
.ripple-bar:nth-child(7) { height: 15px; left: 56px; animation-delay: 1.2s; }

@keyframes rippleBarPulse {
    0%, 100% { 
        transform: scaleY(0.7) scaleX(1);
        opacity: 0.4;
        filter: blur(0.5px) drop-shadow(0 0 6px rgba(244, 46, 241, 0.5));
    }
    25% { 
        transform: scaleY(1) scaleX(1.5);
        opacity: 0.8;
        filter: blur(0.2px) drop-shadow(0 0 10px rgba(244, 46, 241, 0.8));
    }
    50% { 
        transform: scaleY(1.4) scaleX(1);
        opacity: 1;
        filter: blur(0.1px) drop-shadow(0 0 15px rgba(244, 46, 241, 1));
    }
    75% { 
        transform: scaleY(1) scaleX(1.2);
        opacity: 0.7;
        filter: blur(0.3px) drop-shadow(0 0 8px rgba(244, 46, 241, 0.7));
    }
}

/* ========== 响应式设计 ========== */


/* =========================
   响应式设计
   ========================= */
/* 小屏手机适配 */
@media (max-width: 480px) {
    .fingerprint-section {
        padding: 2rem 1rem 4rem 1rem; /* 大幅减少上下padding，底部保留更多空间 */
    }
    
    .fingerprint-grid {
        display: block; /* 改为块级布局，强制单列 */
        gap: 0;
    }
    
    .fingerprint-card {
        width: 100% !important;
        min-width: unset; /* 移除最小宽度限制 */
        max-width: none;
        margin: 0 0 1.5rem 0; /* 只保留底部间距 */
        padding: 1.2rem; /* 减少内边距 */
    }
    
    .card-title {
        font-size: 1.1rem; /* 缩小标题 */
    }
    
    .result-key {
        min-width: 50px; /* 减少key列宽度 */
        font-size: 0.75rem;
    }
    
    .result-value {
        font-size: 0.75rem;
    }
    
    .card-button {
        padding: 8px 12px; /* 缩小按钮 */
        font-size: 0.7rem;
        letter-spacing: 1px;
        width: calc(100% - 1rem);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* 中等屏幕手机 */
@media (min-width: 481px) and (max-width: 768px) {
    .fingerprint-section {
        padding: 4rem 1.5rem 6rem 1.5rem;
    }
    
    .fingerprint-grid {
        display: flex;
        flex-direction: column; /* 强制单列 */
        align-items: center;
        gap: 1.5rem;
    }
    
    .fingerprint-card {
        width: 100%;
        max-width: 450px; /* 适中的最大宽度 */
        padding: 1.5rem;
    }

    
    .category-header {
        flex-direction: column;
        text-align: center;
    }

    .category-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .category-stats {
        text-align: center;
        margin-top: 1rem;
    }
}

/* 平板和大屏手机 */
@media (min-width: 769px) and (max-width: 1024px) {
    .fingerprint-grid {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center;
        gap: 1.5rem;
    }
    
    .fingerprint-card {
        width: calc(50% - 0.75rem); /* 两列布局 */
        min-width: 300px;
    }
}

/* 移动端像素字体优化 */
@media (max-width: 768px) {
    .card-title {
        font-size: 1.1rem;
        letter-spacing: 0.08rem;
    }
    
    .result-key,
    .ip-geo-data-key {
        font-size: 0.75rem;
        letter-spacing: 0.04rem;
    }
    
    .result-value,
    .ip-geo-data-value {
        font-size: 0.75rem;
        letter-spacing: 0.02rem;
    }
}

/* =========================
   加载和状态样式
   ========================= */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

/* 3D模型加载成功后的容器样式 */
.model-loaded {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: opacity 0.5s ease;
}

.model-loaded canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
}

/* 优化category-icon容器以确保加载特效居中 */
.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 确保内容不超出边界 */
}

/* 响应式适配加载特效 */
@media (max-width: 768px) {
    .blue-lines-loader,
    .red-crystal-loader,
    .purple-ripple-loader {
        transform: scale(0.8);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.data-updated {
    animation: dataUpdate 1s ease-in-out;
}

@keyframes dataUpdate {
    0% {
        background-color: rgba(255,255,255,0.1);
    }
    50% {
        background-color: rgba(19, 131, 133, 0.3);
    }
    100% {
        background-color: rgba(255,255,255,0.05);
    }
}



@keyframes requestingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* IP地理位置数据特殊显示 */
.ip-geo-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.ip-geo-data-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ip-geo-data-key {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 0.8rem;
    min-width: 80px;
    letter-spacing: 0.05rem;
}

.ip-geo-data-value {
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace !important;
    color: #fff;
    font-size: 0.8rem;
    text-align: right;
    font-weight: 500;
    flex: 1;
    word-break: break-word;
    letter-spacing: 0.03rem;
}

.ip-geo-data-value.interactive {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 状态指示器 */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.status-indicator.normal {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.status-indicator.warning {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.status-indicator.error {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.status-indicator .status-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

/* ========================================
   DNS IP 数量角标样式
   ======================================== */

/* IP 数量角标（右上角小标） */
.ip-count-badge {
    font-size: 0.75em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 4px;
    vertical-align: super;
}


/**
 * StatusBar 样式 - 复用语言按钮的高级特效
 */

/* =========================
   系统状态栏主体
   ========================= */
.system-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 添加底部边框 */
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 为状态栏添加微妙的渐变边框效果 */
.system-status-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(79, 172, 254, 0.3) 50%, 
        transparent 100%);
    opacity: 0.5;
}


/* =========================
   左侧状态区域
   ========================= */
.status-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #4facfe;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.status-indicator {
    display: inline-block;
    animation: statusPulse 2s ease-in-out infinite;
}

/* 检测中状态 - 绿色脉冲 */
.system-status.detecting .status-indicator {
    color: #4CAF50;
    text-shadow: 0 0 10px #4CAF50;
}

/* 完成状态 - 蓝色常亮 */
.system-status.completed .status-indicator {
    color: #4facfe;
    text-shadow: 0 0 15px #4facfe;
    animation: none;
}

/* 风险状态 - 红色闪烁 */
.system-status.risk .status-indicator {
    color: #f44336;
    animation: riskBlink 0.8s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes riskBlink {
    0%, 100% { opacity: 1; text-shadow: 0 0 20px #f44336; }
    50% { opacity: 0.3; }
}

/* =========================
   右侧导航区域
   ========================= */
.status-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* 左侧返回首页链接样式，所有页面统一 */
.status-logo-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 1.1rem;
    padding: 0.5rem 0.8rem;
    transition: all 0.3s ease;
    position: relative;
    text-transform: none;
    letter-spacing: 1px;
}

.status-logo-link:hover {
    color: #4facfe;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}

/* 导航链接样式 */
.status-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-link:hover {
    color: #4facfe;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}

/* 语言选择器在状态栏内的调整 */
/* =========================
   语言选择器 - 融入状态栏设计
   ========================= */
.status-right .language-selector {
    position: relative;
    margin-left: 0.5rem;
}

/* 主按钮样式 - 与状态栏融合 */
/* 替换后的代码 - 无边框设计 */
/* 主按钮样式 - 完全融入状态栏 */
.status-right .language-current {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none; /* 移除边框 */
    border-radius: 0; /* 移除圆角 */
    padding: 0.5rem 0.8rem; /* 调整内边距与导航链接一致 */
    color: rgba(255, 255, 255, 0.7); /* 颜色与导航链接一致 */
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
    overflow: visible; /* 改为visible以显示下划线效果 */
    height: auto; /* 自动高度 */
}




/* 悬停效果 - 与导航链接保持一致 */
.status-right .language-current:hover {
    background: transparent; /* 保持透明 */
    color: #4facfe;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
    transform: none; /* 移除上移效果 */
}

.status-right .language-current:hover::before {
    width: 100%; /* 显示下划线 */
}

.status-right .language-current:hover::after {
    left: 100%;
}
.status-right .language-current:hover .lang-text {
    text-shadow: 0 0 6px rgba(79, 172, 254, 0.4);
}

.lang-flag {
    font-size: 1rem;
    filter: drop-shadow(0 0 0 transparent);
    transition: all 0.3s ease;
}

.status-right .language-current:hover .lang-flag {
    filter: drop-shadow(0 0 3px rgba(79, 172, 254, 0.6));
}

.lang-text {
    font-weight: 500;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 0.85rem;
}

.lang-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: rgba(79, 172, 254, 0.6);
}

/* 下拉框样式  */
.status-right .language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    margin-top: 0;
    background: rgba(10, 10, 10, 0.95);
    border-top: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    /* 调整圆角，使上边角为0 */
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 添加连接条，遮盖状态栏底部的装饰线 */
.status-right .language-dropdown::before {
    content: '';
    position: absolute;
    top: -2px;  /* 向上延伸2px */
    left: 0;
    right: 0;
    height: 4px;  /* 足够遮盖渐变线 */
    background: rgba(10, 10, 10, 0.95);  /* 与下拉菜单背景色相同 */
    z-index: 1;
}

.status-right .language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border-color: rgba(79, 172, 254, 0.3);
    animation: dropdownGlow 2s ease-in-out infinite;
}

@keyframes dropdownGlow {
    0%, 100% {
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(79, 172, 254, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    50% {
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(79, 172, 254, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.status-right .language-dropdown.active ~ .language-current .lang-arrow {
    transform: rotate(180deg);
    color: #4facfe;
    text-shadow: 0 0 5px rgba(79, 172, 254, 0.8);
}

.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 9px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    position: relative;
    overflow: hidden;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    letter-spacing: 1px; 
}

.language-option:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
    color: #4facfe;
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.6);
}

.language-option:hover .lang-text::after {
    animation: terminalBlink 1s infinite;
    color: #4facfe;
    margin-left: 2px;
}

.language-option.active {
    background: rgba(255, 255, 255, 0.05);
    color: #4facfe;
    font-weight: 600;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, #4facfe, #00f2fe, #43e97b) 1;
    padding-left: 14px;
}

.language-option.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #4facfe, #00f2fe, #43e97b);
    filter: blur(4px);
    animation: breathingGlow 2s ease-in-out infinite;
}

@keyframes breathingGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.5);
    }
}

.language-option:hover .lang-text {
    animation: microGlitch 8s infinite;
}

@keyframes microGlitch {
    0%, 90%, 92%, 100% {
        transform: translate(0);
        filter: none;
    }
    91% {
        transform: translate(1px, 0);
        filter: hue-rotate(90deg);
    }
    91.5% {
        transform: translate(-1px, 0);
        filter: hue-rotate(-90deg);
    }
}

.language-option:hover .lang-flag {
    filter: drop-shadow(0 0 6px rgba(79, 172, 254, 0.8));
    transform: scale(1.1);
    transition: all 0.3s ease;
}

@keyframes terminalBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* =========================
   页面内容调整
   ========================= */
body {
    padding-top: 40px; /* 为状态栏留出空间 */
}

.main-container {
    padding-top: 0; /* 移除原有的padding */
}

/* =========================
   Footer 样式 - v2
   ========================= */
.page-footer {
    padding: 3.5rem 2rem 2rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Arial', 'Microsoft YaHei', sans-serif;
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

/* Footer Logo - 复用 hero-title 样式 */
.footer-logo-title {
    font-family: 'EchoScan', 'Microsoft YaHei', sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.3rem;
    margin: 0;
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: transparent;
    --footer-stroke-width: 1.5px;
    -webkit-text-stroke: var(--footer-stroke-width) #ffffff;
    text-transform: uppercase;
    display: inline-flex;
    gap: 0.05rem;
    line-height: 1;
    align-items: flex-end;
    --footer-wave-height: 4px;
    --footer-wave-delay-step: 0.12s;
    --footer-wave-duration: 5s;

    /* 镂空发光效果 */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));

    /* 禁止选中 */
    -webkit-user-select: none;
    user-select: none;

    cursor: default;
    transition: all 0.3s ease;
}

.footer-logo-title:hover {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.footer-logo-letter {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: var(--footer-stroke-width) #ffffff;
    text-stroke: var(--footer-stroke-width) #ffffff;
    animation: footer-logo-wave var(--footer-wave-duration) ease-in-out infinite;
    animation-delay: calc(var(--wave-index, 0) * var(--footer-wave-delay-step));
    transform-origin: bottom center;
    will-change: transform;
}

@keyframes footer-logo-wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(-1 * var(--footer-wave-height)));
    }
}

/* 邮箱文本 */
.footer-email-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* 社交图标容器 */
.footer-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* 社交图标 - 简洁样式，无圆框 */
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social-icon:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* 底部版权区域 */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-divider {
    opacity: 0.4;
    font-size: 0.8rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.footer-link:hover {
    color: #4facfe;
}

.footer-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(79, 172, 254, 0.9), rgba(0, 242, 254, 0.7));
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

/* =========================
   响应式设计
   ========================= */
@media (max-width: 768px) {
    .system-status-bar {
        height: 50px;
        padding: 0 1rem;
    }
    
    .system-status {
        font-size: 0.8rem;
    }
    
    .status-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* 移动端只显示关于链接 */
    .status-link[href="/blog"] {
        display: none;
    }

    /* 移动端 Footer 样式 */
    .page-footer {
        padding: 2.5rem 1.5rem 1.5rem;
    }

    .footer-main {
        padding-bottom: 2rem;
    }

    .footer-brand {
        align-items: center;
        text-align: center;
    }

    .footer-logo-title {
        font-size: 1.8rem;
        letter-spacing: 0.2rem;
        --footer-stroke-width: 1.2px;
        --footer-wave-height: 10px;
        --footer-wave-delay-step: 0.1s;
    }

    .footer-email-text {
        font-size: 0.85rem;
    }

    .footer-social {
        justify-content: center;
        gap: 1.2rem;
    }

    .footer-social-icon {
        padding: 0.5rem;  /* 移动端增加可点击区域 */
    }

    .footer-icon {
        width: 24px;  /* 移动端图标稍大 */
        height: 24px;
    }

    .footer-bottom {
        padding-top: 1.5rem;
    }

    .footer-legal {
        font-size: 0.8rem;
        gap: 0.5rem;
    }

}

/* =========================
   底部呼吸光带效果
   ========================= */
/* 为呼吸光带创建新的伪元素 */
.system-status-bar::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(79, 172, 254, 0.8) 20%,
        rgba(0, 254, 174, 0.8) 50%,
        rgba(79, 172, 254, 0.8) 80%,
        transparent 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 2s cubic-bezier(0.8, 0.15, 0.92, 0.9);
    filter: blur(0.5px);
    z-index: 2; /* 确保在边框线上方 */
}

/* 鼠标悬停时 - 快速展开 */
.system-status-bar:hover::before {
    transform: scaleX(1);
    animation: breathingLight 3s ease-in-out infinite;
    transition: transform 0.3s ease-in;  /* 展开只需0.3秒 */
}



@keyframes breathingLight {
    0%, 100% {
        opacity: 0.8;
        filter: blur(0.5px);
    }
    50% {
        opacity: 1;
        filter: blur(1px);
    }
}

/* =========================
   故障动画(Glitch)
   ========================= */
/* 为system-status添加glitch-element类支持 */
.system-status {
    position: relative;
    transition: all 0.1s ease;
    display: inline-flex; /* 改为inline-flex以保持原有布局 */
}

/* 悬停时的故障效果 */
.system-status:hover {
    animation: elegantGlitch 3s infinite;
    text-shadow: 
        0 0 2px rgba(79, 172, 254, 0.2),
        0 0 4px rgba(79, 172, 254, 0.1);
}

@keyframes elegantGlitch {
    0%, 89%, 100% {
        transform: translate(0);
        filter: none;
        color: inherit;
    }
    90% {
        transform: translate(0.5px, 0);
        filter: brightness(1.05);
        color: #fe2a00;
        text-shadow: 
            0 0 3px rgba(0, 242, 254, 0.4);
    }
    91% {
        transform: translate(-0.5px, 0);
        color: inherit;
    }
    92% {
        transform: translate(0.3px, 0.3px);
        filter: brightness(0.98);
        color: #4facfe;
        text-shadow: 
            0 0 2px rgba(79, 172, 254, 0.3);
    }
    93% {
        transform: translate(0);
        color: inherit;
    }
    94% {
        transform: translate(-0.3px, -0.3px);
        filter: brightness(1.02);
        color: #00f2fe;
        text-shadow: 
            0 0 3px rgba(0, 242, 254, 0.3);
    }
    95% {
        transform: translate(0);
        color: inherit;
    }
}

/* =========================
   Hash显示 - 3D液态折叠密码锁设计
   ========================= */
.hash-display {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    gap: 0.6rem;
}

.hash-access-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 100%;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: none;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, text-shadow 0.3s ease, background 0.4s ease;
    position: relative;
    overflow: visible;
}

.hash-access-prefix,
.hash-access-number {
    display: inline-flex;
    align-items: center;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.hash-access-prefix {
    min-width: 1.6rem;
    justify-content: flex-end;
}

.hash-access-number {
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease;
    letter-spacing: 0;
}

.hash-access-count[data-prefix="Access"] .hash-access-number {
    margin-left: 0;
}

.hash-access-count[data-prefix=">"] .hash-access-number {
    margin-left: 0.15rem;
}

.hash-access-prefix-ghost {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    color: inherit;
    filter: blur(0px);
}

.hash-access-prefix.fade-in {
    animation: hashAccessPrefixFadeIn 0.35s ease forwards;
}

.hash-access-prefix-ghost.fade-out {
    animation: hashAccessPrefixGhostTrail 0.45s ease forwards;
}

.hash-access-count.prism-hidden {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-6px);
}

.hash-access-count.prism-blur-show {
    animation: hashAccessPrismBlurFocus 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hash-access-count.loading {
    color: rgba(255, 255, 255, 0.35);
    animation: hashLoadingPulse 1.5s ease-in-out infinite;
}

.hash-access-count.blue {
    color: #4facfe;
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.35);
}

.hash-access-count.green {
    color: #43e962;
    text-shadow: 0 0 8px rgba(67, 233, 123, 0.35);
}

.hash-access-count.prism {
    color: transparent;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
}

@keyframes hashLoadingPulse {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-0.5px);
    }
}

@keyframes hashAccessPrefixFadeIn {
    0% {
        opacity: 0;
        transform: translateY(40%) scale(0.98);
        filter: blur(3px);
    }
    60% {
        opacity: 0.65;
        transform: translateY(8%) scale(1.02);
        filter: blur(1.2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes hashAccessPrefixGhostTrail {
    0% {
        opacity: 0.5;
        transform: translateY(-10%) scale(1);
        filter: blur(0);
    }
    50% {
        opacity: 0.25;
        transform: translateY(-55%) scale(1.05);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-120%) scale(1.08);
        filter: blur(4px);
    }
}

@keyframes hashAccessPrismBlurFocus {
    0% {
        opacity: 0;
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* Hash容器 - 支持双行布局 */
.hash-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 单个hash行 */
.hash-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.5s ease;
}

/* Hash标签 */
.hash-label {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.5s ease;
    min-width: 45px;
    text-align: center;
    white-space: nowrap;
}

.hash-label.unique {
    color: #47a0ed;
    text-decoration-color: rgba(79, 172, 254, 0.5);
}

.hash-label.stable {
    color: #43e962;
    text-decoration-color: rgba(67, 233, 123, 0.5);
}

/* 检测中状态文字样式 */
.system-status.detecting .status-text {
    color: #4CAF50 !important;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    animation: detectingTextPulse 2s ease-in-out infinite;
}

@keyframes detectingTextPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.01);
    }
}

/* 完成状态文字样式 */
.system-status.normal .status-text {
    color: #4facfe !important;
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.4);
}

/* 风险状态文字样式（已有的保持不变） */
.system-status.fingerprint .status-text {
    color: #f44336 !important;
    text-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
    animation: riskTextPulse 1.5s ease-in-out infinite;
}

/* =========================
   3D液态折叠密码锁核心样式
   ========================= */
.hash-value {
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    height: 1.2em;
    width: 8ch; /* 默认显示8个字符的宽度 */
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    perspective: 200px;
    transform-style: preserve-3d;
}

.hash-value.unique {
    color: #47a0ed;
}

.hash-value.stable {
    color: #43e962;
}

/* 3D旋转容器 */
.hash-roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 单个字符槽位 - 3D变换容器 */
.hash-char {
    display: inline-block;
    width: 1ch;
    height: 1.2em;
    line-height: 1.2em;
    text-align: center;
    position: relative;
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 字符呼吸波动效果 */
.hash-char.revealed {
    animation: charBreathe 4s ease-in-out infinite;
}

.hash-char.revealed:nth-child(odd) {
    animation-delay: 0.2s;
}

.hash-char.revealed:nth-child(even) {
    animation-delay: 0.4s;
}

@keyframes charBreathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-1px) scale(1.05);
        opacity: 1;
    }
}

/* 密码锁旋转解锁动画 */
.hash-value.spinning .hash-roller {
    animation: spinUnlock 0.6s ease-out;
}

@keyframes spinUnlock {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(720deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

/* =========================
   🌊 3D液态折叠核心动画
   ========================= */

/* 字符展现效果 - 液态流动3D折叠 */
.hash-char.wave-in {
    opacity: 0;
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    filter: hue-rotate(0deg) saturate(0.5);
}

.hash-char.liquid-fold {
    animation: liquidFold 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes liquidFold {
    0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        opacity: 0.3;
        filter: hue-rotate(0deg) saturate(0.5);
    }
    20% {
        transform: rotateX(45deg) rotateY(45deg) scale(0.6);
        opacity: 0.6;
        filter: hue-rotate(60deg) saturate(0.8);
    }
    40% {
        transform: rotateX(90deg) rotateY(180deg) scale(0.4);
        opacity: 0.8;
        filter: hue-rotate(120deg) saturate(1.2);
    }
    60% {
        transform: rotateX(135deg) rotateY(270deg) scale(0.8);
        opacity: 0.9;
        filter: hue-rotate(180deg) saturate(1.5);
    }
    80% {
        transform: rotateX(180deg) rotateY(315deg) scale(1.1);
        opacity: 1;
        filter: hue-rotate(240deg) saturate(1.2);
    }
    100% {
        transform: rotateX(0deg) rotateY(360deg) scale(1);
        opacity: 1;
        filter: hue-rotate(360deg) saturate(1);
    }
}

/* 收缩时的反向液态效果 */
.hash-char.liquid-unfold {
    animation: liquidUnfold 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes liquidUnfold {
    0% {
        transform: rotateX(0deg) rotateY(360deg) scale(1);
        opacity: 1;
        filter: hue-rotate(360deg) saturate(1);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg) scale(0.8);
        opacity: 0.3;
        filter: hue-rotate(0deg) saturate(0.5);
    }
}

/* =========================
   悬停交互状态
   ========================= */
.hash-display:hover .hash-value {
    width: 32ch; /* 展开显示完整hash */
}

.hash-display:hover .hash-label {
    opacity: 1;
    transform: translateX(0);
}

.hash-display:hover .hash-value.unique {
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.6);
}

.hash-display:hover .hash-value.stable {
    text-shadow: 0 0 8px rgba(67, 233, 123, 0.6);
}

/* 加载状态 */
.hash-value.loading .hash-roller::before {
    content: "········";
    animation: loadingDots 1.5s ease-in-out infinite;
}

@keyframes loadingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* =========================
   响应式调整
   ========================= */
@media (max-width: 768px) {
    .hash-display {
        display: none; /* 移动端隐藏hash显示 */
    }
}
/* =========================
   博客页面专用样式 - 仅博客列表页
   ========================= */

/* 分类筛选器 */
.blog-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.filter-btn:hover,
.filter-btn.active {
    color: #4facfe;
    border-color: #4facfe;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}

.filter-btn:hover::before {
    width: 100px;
    height: 100px;
}

/* 博客时间轴 */
.blog-timeline {
    position: relative;
    padding-left: 50px;
}

.blog-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        #4facfe 10%, 
        #00f2fe 50%, 
        #43e97b 90%, 
        transparent 100%);
    filter: drop-shadow(0 0 5px #4facfe);
}

.blog-card {
    position: relative;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-20px);
    animation: blogCardSlideIn 0.6s ease-out forwards;
}

.blog-card:nth-child(1) { animation-delay: 0.2s; }
.blog-card:nth-child(2) { animation-delay: 0.4s; }
.blog-card:nth-child(3) { animation-delay: 0.6s; }

.blog-card::before {
    content: none;
}

/* 置顶卡片样式 */
.blog-card.pinned {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 1px rgba(255, 215, 0, 0.12);
}

.blog-card.pinned::before {
    display: none;
}

.blog-card.pinned::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700 0%, #4facfe 50%, #00f2fe 100%);
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 2.3s ease, transform 2.3s ease;
}

.blog-card.pinned:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.blog-pinned-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a1a2e;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: none;
    animation: badgePulse 2s ease-in-out infinite;
}

/* 博客元信息 */
.blog-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.blog-date {
    color: #4facfe;
    font-family: 'VT323', monospace;
    letter-spacing: 1px;
}

.blog-category {
    background: rgba(79, 172, 254, 0.2);
    color: #4facfe;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

/* 博客标题 */
.blog-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.blog-title a {
    position: relative;
    display: inline-block;
    padding-left: 16px;
    padding-right: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    transition: all 0.4s ease;
}

.blog-card.content-section .blog-title a {
    color: rgba(255, 255, 255, 0.9);
}

.blog-card.content-section a {
    color: rgba(255, 255, 255, 0.9);
}

.blog-title a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 50%;
    background: linear-gradient(180deg,
        #4facfe 0%,
        #00f2fe 30%,
        #43e97b 70%,
        #38f9d7 100%);
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.4s ease;
    animation: topicLinkGlow 3s ease-in-out infinite;
}

.blog-title a::after {
    display: none !important;
}

.blog-title a:hover {
    color: #ffffff;
    padding-left: 20px;
}

.blog-card.content-section .blog-title a:hover {
    color: #ffffff;
}

.blog-card.content-section a:hover {
    color: #ffffff;
}

.blog-title a:hover::before {
    height: 80%;
    opacity: 1;
    filter: blur(1px) drop-shadow(0 0 12px rgba(79, 172, 254, 0.8));
}

/* 博客摘要 */
.blog-excerpt {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* 博客标签 */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-tag {
    color: #43e97b;
    font-size: 0.8rem;
    font-family: 'VT323', monospace;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.blog-tag:hover {
    opacity: 1;
    text-shadow: 0 0 5px #43e97b;
}

/* 筛选动画 */
.blog-card.hiding {
    animation: blogHide 0.3s ease-out forwards;
}

.blog-card.showing {
    animation: blogShow 0.3s ease-out forwards;
}

/* =========================
   博客页面动画
   ========================= */
@keyframes blogCardSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes timelinePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px #4facfe, inset 0 0 10px rgba(255,255,255,0.5);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 30px #4facfe, inset 0 0 15px rgba(255,255,255,0.8);
    }
}

@keyframes blogHide {
    to {
        opacity: 0;
        transform: scale(0.95) translateX(-10px);
    }
}

@keyframes blogShow {
    from {
        opacity: 0;
        transform: scale(0.95) translateX(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes topicLinkGlow {
    0%, 100% {
        opacity: 0.8;
        filter: blur(0);
    }
    50% {
        opacity: 1;
        filter: blur(1px) drop-shadow(0 0 8px rgba(79, 172, 254, 0.6));
    }
}

/* =========================
   响应式设计 - 博客列表页
   ========================= */
@media (max-width: 768px) {
    .blog-timeline {
        padding-left: 30px;
    }
    
    .blog-timeline::before {
        left: 10px;
    }
    
    .blog-card::before {
        left: -21px;
    }
}

/* 博客列表页面 - 为WebGL动画留出底部空间 */
.page-blog .page-container {
    padding-bottom: 1000px;
}
.guard-hero-section {
    min-height: 72vh;
}

.guard-profile-meta {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.58);
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.guard-home-section {
    padding-top: 0;
    padding-bottom: 16rem;
    max-width: 1120px;
}

.guard-home-intro {
    margin: 0 auto 2.8rem;
    max-width: 980px;
    text-align: center;
}

.guard-home-intro h2 {
    margin: 0 0 0.9rem;
    font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 400;
    letter-spacing: 0.12rem;
    color: #ffffff;
}

.guard-overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
    margin-top: 2.2rem;
}

.guard-overview-item {
    min-width: 110px;
    text-align: center;
}

.guard-overview-label {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.guard-overview-value {
    display: block;
    color: #ffffff;
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 1.9rem;
    letter-spacing: 0.08rem;
}

.guard-pass-note {
    margin: 0 auto 2rem;
    max-width: 760px;
    color: #43e97b;
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 1.1rem;
    letter-spacing: 0.08rem;
    text-align: center;
}

.guard-home-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 980px;
}

.guard-home-item {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.9rem 1.25rem;
    padding: 0.8rem 0;
}

.guard-home-item + .guard-home-item {
    margin-top: 0.2rem;
}

.guard-home-code {
    display: block;
    color: rgba(255, 255, 255, 0.38);
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.guard-home-title {
    display: block;
    margin-top: 0.1rem;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0.01rem;
}

.guard-home-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    line-height: 1.2;
}

.guard-home-state {
    padding-top: 0.1rem;
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.guard-home-item.guard-home-pass .guard-home-state {
    color: #43e97b;
}

.guard-home-item.guard-home-fail .guard-home-state {
    color: #ff5b6e;
}

.guard-home-item.guard-home-skip .guard-home-state {
    color: rgba(255, 255, 255, 0.38);
}

.guard-home-item.guard-home-fail .guard-home-title {
    color: #ffd8dc;
}

.guard-home-item.guard-home-pass .guard-home-meta {
    color: rgba(214, 255, 227, 0.66);
}

.guard-home-item.guard-home-fail .guard-home-meta {
    color: rgba(255, 190, 198, 0.76);
}

.guard-home-item.guard-home-skip .guard-home-meta {
    color: rgba(255, 255, 255, 0.34);
}

.guard-sensitive-panel {
    margin: 3.5rem auto 0;
    max-width: 980px;
}

.guard-debug-head h3 {
    margin: 0 0 0.4rem;
    color: #ffffff;
    font-family: 'VT323', 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.12rem;
}

.guard-debug-head p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.7;
}

.guard-sensitive-output {
    margin: 0;
    padding: 0;
    color: rgba(210, 240, 255, 0.88);
    background: transparent;
    border: none;
    font-family: 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

.guard-issue-details {
    margin: 0.2rem 0 0;
    padding: 0;
    color: rgba(210, 240, 255, 0.72);
    background: transparent;
    border: none;
    font-family: 'Fusion Pixel Font', 'Courier New', monospace;
    font-size: 0.72rem;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 900px) {
    .guard-home-item {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .guard-home-state {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .guard-home-section {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
        padding-bottom: 10rem;
    }

    .guard-overview {
        gap: 1.4rem 2rem;
    }

    .guard-overview-item {
        min-width: 90px;
    }

    .guard-home-intro h2 {
        font-size: 2rem;
    }
}