/* =========================================
   NeonDashboard Theme - Core Styles
   ========================================= */

/* 1. 全局变量与基础重置 */
:root {
    --bg-color: #0b1120;
    --panel-bg: rgba(15, 23, 42, 0.75);
    --border-color: #1e293b;
    --neon-blue: #38bdf8;
    --neon-purple: #a855f7;
    --text-main: #e2e8f0;
    --text-sub: #94a3b8;
    --glow-strength: 0px 0px 15px rgba(56, 189, 248, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'JetBrains Mono', 'Consolas', monospace, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    /* 科技感网格背景 */
    background-image: 
        linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

a { color: var(--neon-blue); text-decoration: none; transition: all 0.3s ease; }
a:hover { text-shadow: 0 0 8px var(--neon-blue); }

/* 2. 主容器与布局 */
.dashboard {
    max-width: 900px;
    margin: 60px auto;
    padding: 40px;
    position: relative;
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: var(--neon-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* 3. 8个机械触点 (Nodes) */
.node {
    position: absolute;
    background: var(--bg-color);
    border: 1px solid var(--neon-blue);
    z-index: 10;
    box-shadow: var(--glow-strength);
    animation: node-breathe 3s infinite alternate;
}

/* 方形触点 (四角) */
.node-sq { width: 12px; height: 12px; }
.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

/* 横向触点 (上下边中点) */
.node-h { width: 40px; height: 6px; top: -3px; left: 50%; transform: translateX(-50%); }
.bc { top: auto; bottom: -3px; }

/* 纵向触点 (左右边中点) */
.node-v { width: 6px; height: 40px; left: -3px; top: 50%; transform: translateY(-50%); }
.cr { left: auto; right: -3px; }

/* 4. 流光卡片效果 */
.glow-card, .panel {
    position: relative;
    padding: 20px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.glow-card:hover, .panel:hover {
    transform: translateY(-2px);
}

/* 旋转流光伪元素 */
.glow-card::before, .panel::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg, 
        transparent 0%, 
        var(--neon-blue) 10%, 
        transparent 20%
    );
    animation: rotate-border 4s linear infinite;
    z-index: -1;
}

/* 内部遮罩，形成边框效果 */
.glow-card::after, .panel::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 3px;
    z-index: -1;
}

.card-content { position: relative; z-index: 1; }
.icon { font-size: 1.5rem; margin-bottom: 10px; display: block; }
.name { font-size: 0.8rem; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; }
.status { font-size: 1.2rem; color: #fff; margin-top: 5px; font-weight: bold; }

/* 5. 文章列表样式适配 */
.panel h2 { border: none; padding: 0; margin-bottom: 10px; font-size: 1.2rem; }
.panel .card-content .name { margin-bottom: 15px; display: flex; gap: 15px; flex-wrap: wrap; }
.text p { margin-bottom: 1em; }
.text img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }

/* 6. 分页样式 */
.page-navigator {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    padding: 0;
}
.page-navigator li a, .page-navigator li span {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-sub);
    transition: all 0.3s;
}
.page-navigator li a:hover, .page-navigator .current span {
    background: var(--neon-blue);
    color: var(--bg-color);
    border-color: var(--neon-blue);
    box-shadow: var(--glow-strength);
}

/* 7. 关键帧动画 */
@keyframes rotate-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes node-breathe {
    0% { opacity: 0.6; box-shadow: 0 0 5px rgba(56, 189, 248, 0.2); }
    100% { opacity: 1; box-shadow: 0 0 15px rgba(56, 189, 248, 0.6); }
}

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

.fade-in-up {
    animation: reveal 0.8s ease forwards;
}

/* 8. 响应式处理 */
@media (max-width: 768px) {
    .dashboard { margin: 20px; padding: 20px; }
    .node-h, .node-v { display: none; } /* 移动端隐藏侧边触点，保留四角 */
    h2 { font-size: 1.2rem; }
}












/* =========================================
           核心样式 (保留原样)
           ========================================= */
        :root {
            --bg-color: #0b1120;
            --panel-bg: rgba(15, 23, 42, 0.75);
            --border-color: #1e293b;
            --neon-blue: #38bdf8;
            --neon-purple: #a855f7;
            --text-main: #e2e8f0;
            --text-sub: #94a3b8;
            --glow-strength: 0px 0px 15px rgba(56, 189, 248, 0.4);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'JetBrains Mono', 'Consolas', monospace, sans-serif;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
            background-image:
                linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .dashboard {
            max-width: 800px;
            margin: 50px auto;
            padding: 40px;
            position: relative;
            background: var(--panel-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            box-shadow: 0 0 40px rgba(0,0,0,0.5);
        }

        /* 8个机械触点 */
        .node { position: absolute; width: 10px; height: 10px; border: 1px solid var(--neon-blue); box-shadow: var(--glow-strength); z-index: 10; transition: all 0.3s ease; }
        .tl { top: -5px; left: -5px; border-right: none; border-bottom: none; }
        .tr { top: -5px; right: -5px; border-left: none; border-bottom: none; }
        .bl { bottom: -5px; left: -5px; border-right: none; border-top: none; }
        .br { bottom: -5px; right: -5px; border-left: none; border-top: none; }
        .tc { top: -5px; left: 50%; transform: translateX(-50%); border-bottom: none; width: 40px; height: 5px; }
        .bc { bottom: -5px; left: 50%; transform: translateX(-50%); border-top: none; width: 40px; height: 5px; }
        .cl { left: -5px; top: 50%; transform: translateY(-50%); border-right: none; height: 40px; width: 5px; }
        .cr { right: -5px; top: 50%; transform: translateY(-50%); border-left: none; height: 40px; width: 5px; }

        /* 动画与流光 */
        @keyframes breathe { 0%, 100% { opacity: 0.4; box-shadow: 0 0 5px var(--neon-blue); } 50% { opacity: 1; box-shadow: 0 0 20px var(--neon-blue); } }
        .node { animation: breathe 3s infinite ease-in-out; }
        .fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

        /* 通用面板与列表项 */
        .panel { background: rgba(30, 41, 59, 0.4); border: 1px solid var(--border-color); padding: 20px; margin-bottom: 20px; position: relative; }
        .post-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed rgba(56, 189, 248, 0.2); font-size: 1rem; transition: all 0.3s; }
        .post-item:hover { padding-left: 10px; border-bottom-color: var(--neon-blue); }
        .post-title { font-weight: bold; color: var(--text-main); text-decoration: none; transition: color 0.3s; }
        .post-title:hover { color: var(--neon-blue); text-shadow: 0 0 8px rgba(56, 189, 248, 0.5); }
        .post-date { color: var(--text-sub); font-size: 0.85rem; font-family: 'Courier New', monospace; }

        /* 分页 */
        .page-nav { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
        .page-nav a, .page-nav span { padding: 8px 15px; border: 1px solid var(--border-color); color: var(--text-sub); text-decoration: none; transition: 0.3s; }
        .page-nav .current, .page-nav a:hover { border-color: var(--neon-blue); color: var(--neon-blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.2); }

        /* =========================================
           新增：新中式头部样式 (Ink Header)
           ========================================= */
        .ink-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Logo 区域 */
        .logo-area {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        .logo-img {
            height: 50px; /* 根据实际图片高度调整 */
            width: auto;
            margin-right: 15px;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
        }
        /* 如果没有图片，用文字模拟水印效果 */
        .logo-text {
            font-family: 'Noto Serif SC', serif;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
        }

        /* 导航菜单 */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 25px;
        }
        .nav-link {
            color: var(--text-sub);
            text-decoration: none;
            font-family: 'Noto Serif SC', serif; /* 使用宋体 */
            font-size: 1.1rem;
            transition: all 0.3s;
            position: relative;
        }
        .nav-link:hover, .nav-link.current {
            color: #fff;
            text-shadow: 0 0 8px rgba(255,255,255,0.5);
        }
        /* 悬停下划线特效 */
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -5px;
            left: 50%;
            background-color: #fff;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        .nav-link:hover::after { width: 100%; }

        /* 搜索图标 */
        .search-trigger {
            color: var(--text-sub);
            cursor: pointer;
            font-size: 1.2rem;
            transition: 0.3s;
            margin-left: 10px;
        }
        .search-trigger:hover { color: #fff; transform: scale(1.1); }

        /* 移动端汉堡菜单按钮 (默认隐藏) */
        .mobile-toggle { display: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

        /* 搜索框展开层 */
        .search-overlay {
            display: none;
            margin-top: 20px;
            animation: fadeInUp 0.3s ease;
        }
        .search-form { display: flex; border-bottom: 1px solid var(--neon-blue); }
        .search-input {
            flex: 1;
            background: transparent;
            border: none;
            color: #fff;
            padding: 10px;
            font-family: 'Noto Serif SC', serif;
            outline: none;
        }
        .search-btn { background: transparent; border: none; color: var(--neon-blue); cursor: pointer; padding: 0 10px; }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .dashboard { margin: 20px; padding: 20px; }
            .mobile-toggle { display: block; }
            .nav-menu {
                display: none; /* 默认隐藏菜单 */
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                background: rgba(11, 17, 32, 0.95);
                flex-direction: column;
                padding: 20px;
                border-bottom: 1px solid var(--border-color);
                z-index: 100;
            }
            .nav-menu.active { display: flex; }
            .search-overlay { margin-top: 10px; }
        }