/* ============ 基础变量 ============ */
:root{
  --bg:#0a0e14;
  --bg-2:#0d1320;
  --panel:#111827;
  --panel-2:#151d2e;
  --line:#1e2a3d;
  --text:#c9d6e2;
  --text-dim:#6b7a8d;
  --accent:#00f0ff;
  --accent-2:#7cffb2;
  --accent-3:#ff5e87;
  --warn:#ffd166;
  --glow:0 0 12px rgba(0,240,255,.45), 0 0 32px rgba(0,240,255,.18);
  --glow-green:0 0 12px rgba(124,255,178,.45);
  --font-mono:"JetBrains Mono","SFMono-Regular","Consolas","Liberation Mono","Courier New",monospace;
}
body.light{
  --bg:#eef2f7; --bg-2:#e6ecf3; --panel:#ffffff; --panel-2:#f4f7fb;
  --line:#d5dee9; --text:#22303f; --text-dim:#5c6b7d;
  --accent:#0091a8; --accent-2:#0b8a4f; --accent-3:#d81b60;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}
::selection{background:var(--accent);color:#000}

/* ============ 粒子背景 ============ */
#particle-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.55;
}
/* 扫描线 */
.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, transparent 0, transparent 2px,
    rgba(255,255,255,.014) 3px, transparent 4px);
  mix-blend-mode:overlay;
}

/* ============ 导航 ============ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(10,14,20,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:all .3s;
}
body.light #navbar{background:rgba(238,242,247,.88)}
#navbar.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.4)}
.nav-inner{
  max-width:1100px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:1.15rem;font-weight:700;color:var(--accent);
  text-decoration:none;letter-spacing:1px;
  text-shadow:var(--glow);
}
.logo-bracket{color:var(--accent-3)}
.logo-cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{
  color:var(--text-dim);text-decoration:none;font-size:.85rem;
  padding:8px 12px;border-radius:6px;transition:all .2s;
}
.nav-link:hover{color:var(--accent);background:rgba(0,240,255,.07)}
.nav-link.active{color:var(--accent);text-shadow:var(--glow)}
.theme-toggle{
  background:none;border:1px solid var(--line);color:var(--accent);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:1rem;
  transition:all .2s;margin-left:8px;
}
.theme-toggle:hover{border-color:var(--accent);box-shadow:var(--glow)}

/* 阅读进度条 */
#reading-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  box-shadow:var(--glow);z-index:60;transition:width .1s;
}

/* ============ 主区 ============ */
main{position:relative;z-index:2}
.section{display:none;max-width:1100px;margin:0 auto;padding:110px 24px 60px}
.section.active{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============ 首屏 Hero ============ */
.hero{padding:40px 0 60px;text-align:center}
.terminal-window{
  max-width:640px;margin:0 auto 44px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.5);
  transition:border-color .3s;
}
.terminal-window:hover{border-color:rgba(0,240,255,.4)}
.terminal-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);padding:9px 14px;border-bottom:1px solid var(--line);
}
.dot{width:11px;height:11px;border-radius:50%}
.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.terminal-title{font-size:.72rem;color:var(--text-dim);margin-left:8px}
.terminal-body{padding:16px;font-size:.83rem;min-height:118px}
.prompt{color:var(--accent-2)}
.sep,.path{color:var(--text-dim)}
.cmd{color:var(--text)}
.cursor{color:var(--accent);animation:blink .8s steps(1) infinite}
.t-line{margin-top:5px;white-space:pre-wrap;word-break:break-all}
.t-out{color:var(--text-dim)}
.t-ok{color:var(--accent-2)}
.t-warn{color:var(--warn)}

/* 故障艺术标题 */
.glitch{
  position:relative;color:#fff;
  font-size:clamp(2.4rem,7vw,5rem);font-weight:800;letter-spacing:6px;
  text-shadow:var(--glow);
}
body.light .glitch{color:var(--text)}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
}
.glitch::before{color:var(--accent);animation:glitchTop 3.2s infinite linear alternate-reverse}
.glitch::after{color:var(--accent-3);animation:glitchBot 2.6s infinite linear alternate-reverse}
@keyframes glitchTop{
  0%,92%,100%{clip-path:inset(0 0 60% 0);transform:translate(0)}
  94%{clip-path:inset(0 0 55% 0);transform:translate(-3px,2px)}
  96%{clip-path:inset(10% 0 45% 0);transform:translate(3px,-2px)}
}
@keyframes glitchBot{
  0%,92%,100%{clip-path:inset(60% 0 0 0);transform:translate(0)}
  94%{clip-path:inset(65% 0 0 0);transform:translate(3px,-2px)}
  96%{clip-path:inset(50% 0 10% 0);transform:translate(-3px,2px)}
}
.hero-sub{margin-top:18px;color:var(--text-dim);font-size:.95rem;letter-spacing:1px}
.accent{color:var(--accent);text-shadow:var(--glow)}

.hero-stats{display:flex;justify-content:center;gap:44px;margin:44px 0;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat-num{font-size:1.9rem;font-weight:700;color:var(--accent);text-shadow:var(--glow)}
.stat-label{font-size:.72rem;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

.btn{
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;
  padding:11px 26px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:all .2s;letter-spacing:.5px;
}
.btn-primary{
  background:linear-gradient(135deg,rgba(0,240,255,.16),rgba(124,255,178,.12));
  border-color:var(--accent);color:var(--accent);
}
.btn-primary:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.btn-ghost{background:none;border-color:var(--line);color:var(--text-dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-back{margin-bottom:24px}

/* ============ 内容块 ============ */
.block{margin-top:30px}
.block-title{
  font-size:1.35rem;color:var(--text);margin-bottom:26px;
  display:flex;align-items:center;gap:10px;
}
.bracket{color:var(--accent-3);font-weight:400}
.block-title::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}

/* ============ 文章卡片 ============ */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post-card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px;cursor:pointer;position:relative;overflow:hidden;
  transition:all .3s;
}
.post-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.post-card:hover{transform:translateY(-5px);border-color:rgba(0,240,255,.35);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.post-card:hover::before{transform:scaleX(1)}
.post-card:hover .post-title{color:var(--accent)}
.post-meta{font-size:.72rem;color:var(--text-dim);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.post-meta .dot-sep{color:var(--accent-3)}
.post-title{font-size:1.05rem;font-weight:700;margin-bottom:10px;transition:color .2s;line-height:1.4}
.post-excerpt{font-size:.83rem;color:var(--text-dim);line-height:1.65}
.post-tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:.68rem;color:var(--accent-2);
  border:1px solid rgba(124,255,178,.3);border-radius:4px;padding:2px 8px;
}
.tag.clickable{cursor:pointer;transition:all .2s}
.tag.clickable:hover{background:rgba(124,255,178,.12)}
.read-more{margin-top:14px;font-size:.75rem;color:var(--accent);opacity:0;transition:opacity .3s}
.post-card:hover .read-more{opacity:1}

/* ============ 筛选 ============ */
.filter-bar{margin-bottom:26px}
.search-input{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:var(--font-mono);font-size:.85rem;
  padding:11px 16px;margin-bottom:14px;outline:none;transition:all .2s;
}
.search-input:focus{border-color:var(--accent);box-shadow:var(--glow)}
.search-input::placeholder{color:var(--text-dim)}
.tag-filters{display:flex;gap:8px;flex-wrap:wrap}
.tag-filter{
  font-size:.72rem;font-family:var(--font-mono);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
  border-radius:20px;padding:5px 14px;transition:all .2s;
}
.tag-filter:hover{border-color:var(--accent);color:var(--accent)}
.tag-filter.active{border-color:var(--accent);color:var(--accent);background:rgba(0,240,255,.1);box-shadow:var(--glow)}
.no-result{display:none;text-align:center;padding:60px 0;color:var(--text-dim)}
.no-result.show{display:block}

/* ============ 文章详情 ============ */
.article-wrap{max-width:820px;margin:0 auto}
.article-head{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.article-head h1{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.35;margin-bottom:14px;color:#fff;text-shadow:var(--glow)}
body.light .article-head h1{color:var(--text)}
.article-meta{font-size:.78rem;color:var(--text-dim);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.article-body{font-size:.95rem;line-height:1.9;color:var(--text)}
.article-body h2{font-size:1.35rem;margin:34px 0 14px;color:var(--accent);border-left:3px solid var(--accent-3);padding-left:14px}
.article-body h3{font-size:1.08rem;margin:26px 0 10px;color:var(--accent-2)}
.article-body p{margin-bottom:18px}
.article-body ul,.article-body ol{margin:0 0 18px 22px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(0,240,255,.4)}
.article-body a:hover{border-bottom-style:solid}
.article-body blockquote{
  border-left:3px solid var(--accent-3);background:var(--panel-2);
  padding:12px 18px;border-radius:0 8px 8px 0;margin:0 0 18px;color:var(--text-dim);
}
.article-body code{
  background:var(--panel-2);color:var(--accent-2);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.82em;
}
.article-body pre{
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:16px;overflow-x:auto;margin:0 0 18px;font-size:.8rem;line-height:1.6;
}
.article-body pre code{background:none;border:none;padding:0;color:var(--text)}
.article-body img{max-width:100%;border-radius:8px;margin:0 0 18px}
.article-body hr{border:none;border-top:1px solid var(--line);margin:30px 0}

/* ============ 关于 ============ */
.about-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:40px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;
}
.avatar{position:relative;width:110px;height:110px}
.avatar-inner{
  width:100%;height:100%;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:#000;letter-spacing:2px;
  box-shadow:var(--glow);
}
.avatar::after{
  content:"";position:absolute;inset:-8px;border-radius:18px;
  border:1px dashed rgba(0,240,255,.35);animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.about-text h3{font-size:1.25rem;color:var(--accent);margin-bottom:14px}
.about-text p{margin-bottom:14px;color:var(--text-dim);font-size:.9rem}
.skills{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.skill{
  font-size:.75rem;border:1px solid var(--line);border-radius:6px;padding:4px 12px;
  color:var(--accent-2);background:var(--panel-2);transition:all .2s;
}
.skill:hover{border-color:var(--accent-2);box-shadow:var(--glow-green)}
.contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.contact-item{
  font-size:.8rem;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:8px 16px;transition:all .2s;
}
.contact-item:hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-2px)}

/* ============ 页脚 ============ */
footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:26px 24px;margin-top:40px;background:rgba(10,14,20,.6);
}
body.light footer{background:rgba(238,242,247,.7)}
.footer-inner{
  max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--text-dim);
}

/* ============ 响应式 ============ */
@media (max-width:768px){
  .nav-inner{padding:0 16px}
  .nav-link{padding:6px 8px;font-size:.78rem}
  .section{padding:95px 16px 50px}
  .about-card{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
  .about-text p{text-align:left}
  .hero-stats{gap:26px}
  .stat-num{font-size:1.5rem}
  .terminal-body{font-size:.75rem}
}