:root { --neon-blue: #00f3ff;--cyber-purple: #bd00ff;--matrix-green: #00ff88;--dark-bg: #0a0a0f;}
a {color: inherit;text-decoration: none;cursor: pointer;}
body {font-family: 'Segoe UI', system-ui, sans-serif;background: var(--dark-bg);color: #e0e0e0;margin: 0;line-height: 1.6;}

/* 动态导航栏 */
.nav-container {background: rgba(10, 10, 15, 0.95);backdrop-filter: blur(10px);border-bottom: 1px solid var(--neon-blue);box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);position: sticky;top: 0;z-index: 1000;}
nav {max-width: 1200px;margin: 0 auto;padding: 1rem;display: flex;justify-content: space-between;align-items: center;}

/* 新增导航菜单间距 */
.nav-menu {display: flex;gap: 2rem;}

.nav-logo {font-family: 'Courier New', monospace;font-size: 1.8rem;position: relative;
    background: linear-gradient(45deg,
            var(--neon-blue) 20%,
            var(--cyber-purple) 50%,
            var(--matrix-green) 80%);
    -webkit-background-clip: text;background-clip: text;color: transparent;
    text-shadow:
        0 0 15px rgba(0, 243, 255, 0.4),
        0 0 30px rgba(189, 0, 255, 0.3);
    animation: logo-glow 2.5s ease-in-out infinite;transition: all 0.3s ease;
}

.nav-logo::after {content: attr(data-text);position: absolute;top: 0;left: 0;z-index: -1;background: inherit;filter: blur(20px);opacity: 0.7;}

@keyframes logo-glow {
    0%,100% {text-shadow:0 0 15px rgba(0, 243, 255, 0.4),0 0 30px rgba(189, 0, 255, 0.3);}
    50% {text-shadow:0 0 25px rgba(0, 243, 255, 0.6),0 0 45px rgba(189, 0, 255, 0.5),0 0 60px rgba(0, 255, 136, 0.4);}
}

/* 响应式网格布局 */
.main-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;padding: 2rem;max-width: 1200px;margin: 2rem auto;}

/* 科技感卡片 */
.article-card {background: rgba(20, 20, 30, 0.9);border: 1px solid rgba(0, 243, 255, 0.1);border-radius: 8px;padding: 1.5rem;transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer;position: relative;overflow: hidden;}
.article-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 243, 255, 0.2);}
.card-gradient {position: absolute;top: 0;left: -50%;width: 200%;height: 100%;background: linear-gradient(90deg,transparent,rgba(0, 243, 255, 0.1),transparent);transition: left 0.5s;
}
.article-card:hover .card-gradient {left: 100%;}

/* 页脚样式 */
.cyber-footer {background: rgba(10, 10, 15, 0.95);border-top: 1px solid var(--matrix-green);margin-top: 4rem;padding: 2rem 1rem;}
.footer-grid {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;}
.footer-section h3 {color: var(--matrix-green);border-left: 3px solid currentColor;padding-left: 1rem;}

/* 响应式设计 */
@media (max-width: 768px) {.nav-menu {display: none;}
.main-grid {grid-template-columns: 1fr;}}
/* 英雄时刻 */
.cyber-hero {position: relative;min-height: 50vh;background: linear-gradient(45deg,var(--dark-bg) 30%,rgba(20, 20, 30, 0.9));border-bottom: 2px solid var(--neon-blue);overflow: hidden;padding: 3rem 2rem;}
.hero-content {position: relative;max-width: 1200px;margin: 0 auto;text-align: center;z-index: 2;}
.hero-title {font-size: 4rem;margin-bottom: 1.5rem;font-family: 'Courier New', monospace;}
.title-gradient {background: linear-gradient(45deg, var(--neon-blue), var(--matrix-green));-webkit-background-clip: text;background-clip: text;color: transparent;}
.glitch-text {display: block;font-size: 1.5rem;color: rgba(255, 255, 255, 0.2);text-shadow: 0 0 10px var(--neon-blue);animation: glitch 2s infinite;}
.neon-divider {width: 200px;height: 2px;background: var(--cyber-purple);margin: 2rem auto;box-shadow: 0 0 15px var(--cyber-purple);}
.hero-subtitle {font-size: 1.5rem;color: var(--matrix-green);text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);}
.neon-form {display: flex;gap: 15px;max-width: 600px;margin: 0 auto;}
.neon-input {flex: 1;background: rgba(0, 0, 0, 0.6);border: 1px solid #0ff;padding: 12px 20px;color: #0ff;font-family: 'Segment7';text-shadow: 0 0 5px #0ff;position: relative;}
.neon-input:focus {box-shadow: 0 0 15px #0ff;outline: none;}
.search-hologram {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg,transparent 49.9%,rgba(0, 255, 255, 0.2) 50%,transparent 50.1%);pointer-events: none;}
.neon-button {position: relative;padding: 1rem 2rem;border: 1px solid var(--neon-blue);color: var(--neon-blue);background: rgba(0, 243, 255, 0.1);font-family: 'Courier New', monospace;transition: all 0.3s ease;overflow: hidden;}
.neon-button.purple {border-color: var(--cyber-purple);color: var(--cyber-purple);background: rgba(189, 0, 255, 0.1);}
.button-glow {position: absolute;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,currentColor,transparent);opacity: 0.3;left: -100%;transition: left 0.5s;}
.neon-button:hover .button-glow {left: 100%;}
.grid-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:repeating-linear-gradient(90deg,rgba(0, 243, 255, 0.05) 0 1px,transparent 1px 20px),repeating-linear-gradient(180deg,rgba(0, 243, 255, 0.05) 0 1px,transparent 1px 20px);pointer-events: none;}
@keyframes glitch {
    0% {text-shadow: 2px 0 var(--neon-blue);}
    20% {text-shadow: -2px 0 var(--cyber-purple);}
    40% {text-shadow: 3px 0 var(--matrix-green);}
    60% {text-shadow: 0 0 transparent;}
    100% {text-shadow: 0 0 transparent;}
}
@media (max-width: 768px) {
    .hero-title {font-size: 2rem;}
    .hero-subtitle {font-size: 1rem;}
    .cyber-hero {min-height: 40vh;/* 移动端高度同步调整 */padding: 2rem 1rem;}
}

/* 时间线 */
.cyber-timeline {position: relative;background: rgba(10, 10, 15, 0.95);padding: 0 1rem;min-height: 400px;overflow: hidden;}
.neon-underline {position: relative;display: inline-block;padding-bottom: 0.5rem;}
.neon-underline::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg, var(--neon-blue), transparent);box-shadow: 0 0 10px var(--neon-blue);}
.milestone-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;margin: 2rem auto;max-width: 1200px;}
.milestone-card {position: relative;padding: 1.5rem;border-left: 3px solid var(--matrix-green);border-left-width: 2px;/* 调整边框粗细 */background: rgba(20, 20, 30, 0.8);transition: transform 0.3s ease;}
.milestone-card:hover {transform: translateX(10px);}
.timeline-dot {position: absolute;left: -10px;top: 30px;width: 16px;height: 16px;background: var(--dark-bg);border: 2px solid var(--matrix-green);border-radius: 50%;box-shadow: 0 0 10px var(--matrix-green);}
.milestone-year {font-family: 'Courier New', monospace;color: var(--neon-blue);font-size: 1.4rem;text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);}
.milestone-title {color: var(--cyber-purple);margin: 0.5rem 0;font-size: 1.1rem;}
.timeline-glitch {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg,transparent 48%,rgba(0, 243, 255, 0.1) 50%,transparent 52%);opacity: 0;animation: glitch-flow 3s infinite;}
@keyframes glitch-flow {
    0% {opacity: 0.3;transform: translateY(-100%);}
    100% {opacity: 0;transform: translateY(100%);}
}
@media (max-width: 768px) {
    .cyber-timeline {padding: 1.5rem 0.5rem;min-height: 350px;}
    .milestone-grid {grid-template-columns: 1fr;}
    .milestone-card {padding: 1rem;margin-left: 0.5rem;}
    .milestone-year {font-size: 1.2rem;}
}
.cyber-waistline {position: relative;height: 80px;background: linear-gradient(45deg,rgba(0, 243, 255, 0.05) 0%,rgba(189, 0, 255, 0.03) 50%,rgba(0, 243, 255, 0.05) 100%);border-top: 1px solid rgba(0, 243, 255, 0.2);border-bottom: 1px solid rgba(189, 0, 255, 0.2);overflow: hidden;}
.scanline {position: absolute;top: 0;left: -100%;width: 200%;height: 100%;background: linear-gradient(90deg,transparent 25%,rgba(0, 243, 255, 0.1) 50%,transparent 75%);animation: scan 4s infinite linear;}
.hologram-effect {position: absolute;width: 100%;height: 100%;background: repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(189, 0, 255, 0.05) 3px,rgba(0, 243, 255, 0.05) 5px);}
@keyframes scan {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(50%);}
}
@media (max-width: 768px) {
    .cyber-waistline {height: 60px;margin: 1.5rem 0;}
}

/* 新增样式 */
.cyber-articles {padding: 2rem 1rem;background: rgba(15, 15, 25, 0.95);border-top: 1px solid rgba(0, 243, 255, 0.1);}
.article-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;max-width: 1200px;margin: 0 auto;}
.article-item {background: rgba(20, 20, 30, 0.9);border: 1px solid rgba(0, 243, 255, 0.05);border-radius: 6px;padding: 1.2rem;transition: transform 0.3s ease;}
.article-item:hover {transform: translateY(-3px);box-shadow: 0 4px 15px rgba(0, 243, 255, 0.1);}
.thumbnail {height: 160px;background-size: cover;position: relative;border-radius: 4px;margin-bottom: 1rem;overflow: hidden;}
.thumbnail-overlay {position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg,rgba(0, 243, 255, 0.1) 0%,rgba(189, 0, 255, 0.05) 100%);}
.article-item h3 {color: var(--matrix-green);font-size: 1.1rem;margin: 0.5rem 0;font-family: 'Courier New', monospace;}
.post-meta {color: var(--neon-blue);font-size: 0.8rem;margin: 0.3rem 0;}
.article-item p {color: rgba(224, 224, 224, 0.8);font-size: 0.9rem;line-height: 1.4;}
@media (max-width: 768px) {
    .article-grid {grid-template-columns: 1fr;}
    .thumbnail {height: 120px;}
    .article-item {padding: 1rem;}
}
.cyber-waistline1 {position: relative;height: 80px;/* 降低高度为4像素 *//* margin: 40px 0; */overflow: hidden;background: linear-gradient(90deg,transparent,var(--neon-blue),var(--cyber-purple),transparent);opacity: 0.7;}

/* 动态流光效果 */
.scanline1 {position: absolute;width: 50%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.8),transparent);animation:scan 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1),hue-shift 3s infinite;filter: blur(2px);}

/* 全息颗粒效果 */
.hologram-effect1 {position: absolute;width: 100%;height: 100%;background:repeating-linear-gradient(90deg,rgba(0, 243, 255, 0.1) 0 2px,transparent 2px 5px),repeating-linear-gradient(0deg,rgba(189, 0, 255, 0.1) 0 2px,transparent 2px 5px);mix-blend-mode: screen;}
@keyframes scan {
    0% {left: -50%;}
    100% {left: 150%;}
}
@keyframes hue-shift {
    0%,100% {filter: hue-rotate(0deg);}
    50% {filter: hue-rotate(90deg);}
}
@media (max-width: 768px) {
    .cyber-waistline1 {height: 20px;}
}

/* 文章列表 */
.article-list-header {padding: 4rem 2rem;border-bottom: 1px solid var(--cyber-purple);position: relative;overflow: hidden;}
.list-title {font-size: 2.5rem;font-family: 'Courier New', monospace;background: linear-gradient(45deg, var(--matrix-green), var(--neon-blue));-webkit-background-clip: text;background-clip: text;color: transparent;margin-bottom: 1rem;}
.category-filter {display: flex;gap: 1.5rem;margin: 2rem 0;flex-wrap: wrap;}
.filter-item {position: relative;padding: 0.8rem 1.5rem;border: 1px solid rgba(0, 243, 255, 0.3);border-radius: 20px;cursor: pointer;transition: all 0.3s ease;}
.filter-item.active,.filter-item:hover {background: rgba(0, 243, 255, 0.1);border-color: var(--neon-blue);box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);}
.list-grid {display: grid;gap: 2rem;padding: 2rem;max-width: 1200px;margin: 0 auto;}
.list-card {background: rgba(20, 20, 30, 0.9);border: 1px solid rgba(189, 0, 255, 0.1);padding: 1.5rem;position: relative;overflow: hidden;transition: transform 0.3s ease;}
.list-card:hover {transform: translateX(10px);box-shadow: 0 5px 20px rgba(189, 0, 255, 0.2);}
.card-meta {display: flex;gap: 1rem;color: var(--matrix-green);font-size: 0.9rem;}
.card-tag {background: rgba(0, 255, 136, 0.1);padding: 0.3rem 0.8rem;border-radius: 15px;}
.card-excerpt {color: #a0a0a0;margin: 1rem 0;line-height: 1.8;}
.pagination-block {display: flex;justify-content: center;gap: 1rem;padding: 2rem;}
.pagination-block .neon-button {position: relative;padding: 1rem 2rem;border: 1px solid var(--neon-blue);color: var(--neon-blue);background: rgba(0, 243, 255, 0.1);font-family: 'Courier New', monospace;transition: all 0.3s ease;overflow: hidden;}
.pagination-block .neon-button.purple {border-color: var(--cyber-purple);color: var(--cyber-purple);background: rgba(189, 0, 255, 0.1);}

/* 响应式设计 */
@media (max-width: 768px) {
    .list-title {font-size: 1.8rem;}
    .category-filter {gap: 1rem;}
    .list-grid {grid-template-columns: 1fr;}
}

/* 详情页容器 */
.detail-container {max-width: 1200px;margin: 3rem auto;padding: 2rem;background: rgba(20, 20, 30, 0.9);border: 1px solid rgba(0, 243, 255, 0.1);border-radius: 8px;position: relative;overflow: hidden;}

/* 标题样式 */
.detail-title {font-size: 2.5rem;font-family: 'Courier New', monospace;color: var(--matrix-green);margin-bottom: 1.5rem;position: relative;}

/* 元数据样式 */
.detail-meta {display: flex;gap: 2rem;color: var(--neon-blue);border-bottom: 1px solid rgba(189, 0, 255, 0.3);padding-bottom: 1rem;margin-bottom: 2rem;}

/* 内容样式 */
.detail-content {font-size: 1.1rem;line-height: 1.8;}
.detail-content p {margin: 1.5rem 0;padding-left: 1rem;border-left: 2px solid rgba(0, 243, 255, 0.2);}

/* 代码块样式 */
pre {background: rgba(10, 10, 15, 0.9);padding: 1.5rem;border: 1px solid var(--cyber-purple);border-radius: 4px;margin: 2rem 0;position: relative;overflow-x: auto;}

/* 返回按钮 */
.back-button {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.8rem 1.5rem;margin-top: 2rem;border: 1px solid var(--neon-blue);color: var(--neon-blue);transition: all 0.3s ease;}

/* 动态边框效果 */
.detail-container::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(45deg,transparent,rgba(0, 243, 255, 0.1),transparent);transform: rotate(45deg);animation: borderFlow 6s infinite linear;}
@keyframes borderFlow {
    0% {transform: rotate(45deg) translate(-10%, -10%);}
    100% {transform: rotate(45deg) translate(10%, 10%);}
}
@media (max-width: 768px) {
    .detail-container {margin: 1.5rem;padding: 1.5rem;}
    .detail-title {font-size: 1.8rem;}
}