/* ============================================================
   LI JINPENG // CYBER RESUME — shared stylesheet
   赛博朋克主题全站共享样式
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:#0a0a12; color:#d6f4ff; overflow-x:hidden;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  line-height:1.75; min-height:100vh;
}
/* 扫描线 + 暗角 */
body::before {
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 2px, transparent 2px 4px);
}
body::after {
  content:""; position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,10,.5) 100%);
}

.mono { font-family:"Cascadia Code",Consolas,monospace; }
.cyan { color:#00f0ff; } .pink { color:#ff2a6d; } .yel { color:#fcee0a; }
a { color:#00f0ff; }

/* ————— 顶部警示条 ————— */
.hazard { height:8px; background:repeating-linear-gradient(45deg,#fcee0a 0 14px,#111 14px 28px); position:relative; z-index:2; }

/* ————— 导航 ————— */
.topnav {
  position:sticky; top:0; z-index:55;
  background:rgba(8,8,16,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid #1b2a3a;
}
.topnav .inner { max-width:1080px; margin:0 auto; padding:13px 26px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand { font-family:"Cascadia Code",Consolas,monospace; font-weight:700; font-size:16px; color:#fff; text-decoration:none; letter-spacing:1px; }
.brand span { color:#ff2a6d; }
.topnav .links { display:flex; gap:4px; flex-wrap:wrap; }
.topnav .links a {
  font-size:12.5px; letter-spacing:2px; color:#9db8c4; text-decoration:none; padding:7px 13px;
  border:1px solid transparent; transition:all .18s;
}
.topnav .links a:hover { color:#00f0ff; border-color:#00f0ff; }
.topnav .links a.on { color:#fcee0a; border-color:#fcee0a; }
.topnav .links a.cta { color:#001318; background:#00f0ff; font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.topnav .links a.cta:hover { background:#fcee0a; color:#000; }

.wrap { max-width:1080px; margin:0 auto; padding:0 26px; position:relative; z-index:2; }

/* ————— 页面头 / 面包屑 ————— */
.page-head { padding:56px 0 30px; }
.crumb { font-family:"Cascadia Code",Consolas,monospace; font-size:12px; letter-spacing:2px; color:#5d7684; }
.crumb a { color:#00f0ff; text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
.page-head h1 { font-size:clamp(30px,5vw,48px); font-weight:900; letter-spacing:3px; color:#fff; margin-top:12px; text-transform:uppercase; text-shadow:0 0 16px rgba(0,240,255,.35); }
.page-head .sub { margin-top:10px; color:#9db8c4; font-size:14px; max-width:680px; }

/* ————— 首页 HERO ————— */
header.hero { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:60px 0 40px; }
.sys { font-size:12px; letter-spacing:3px; color:#ff2a6d; font-family:"Cascadia Code",Consolas,monospace; }
.glitch {
  position:relative; font-size:clamp(46px,8.5vw,96px); font-weight:900; letter-spacing:2px;
  color:#fff; text-transform:uppercase; line-height:1.08; margin:16px 0 8px;
  text-shadow:0 0 18px rgba(0,240,255,.45);
}
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; inset:0; overflow:hidden; background:#0a0a12; }
.glitch::before { color:#00f0ff; animation:gA 2.8s infinite steps(2,end); }
.glitch::after  { color:#ff2a6d; animation:gB 3.4s infinite steps(2,end); }
@keyframes gA {
  0%,88% { clip-path:inset(0 0 100% 0); transform:none; }
  90% { clip-path:inset(12% 0 74% 0); transform:translate(-5px,-2px); }
  94% { clip-path:inset(58% 0 30% 0); transform:translate(5px,2px); }
  98%,100% { clip-path:inset(0 0 100% 0); transform:none; }
}
@keyframes gB {
  0%,84% { clip-path:inset(0 0 100% 0); transform:none; }
  86% { clip-path:inset(70% 0 8% 0); transform:translate(5px,1px); }
  92% { clip-path:inset(28% 0 58% 0); transform:translate(-5px,-1px); }
  96%,100% { clip-path:inset(0 0 100% 0); transform:none; }
}
.hero .sub { font-size:clamp(15px,2.3vw,21px); color:#00f0ff; letter-spacing:4px; font-family:"Cascadia Code",Consolas,monospace; }
.hero .desc { max-width:600px; margin-top:22px; color:#9db8c4; font-size:14.5px; border-left:3px solid #ff2a6d; padding-left:16px; }
.hero .cta { margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; }

.btn {
  font-family:"Cascadia Code",Consolas,monospace; font-size:13px; letter-spacing:2px;
  text-decoration:none; padding:13px 30px; font-weight:700; display:inline-block;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:all .15s;
}
.btn.c { background:#00f0ff; color:#001318; }
.btn.c:hover { background:#fcee0a; box-shadow:0 0 26px rgba(252,238,10,.5); }
.btn.p { background:transparent; color:#ff2a6d; border:1px solid #ff2a6d; }
.btn.p:hover { background:#ff2a6d; color:#fff; box-shadow:0 0 26px rgba(255,42,109,.5); }

/* ————— 滚动 ticker ————— */
.ticker { border-top:1px solid #1b2a3a; border-bottom:1px solid #1b2a3a; overflow:hidden; white-space:nowrap; padding:10px 0; position:relative; z-index:2; }
.ticker span { display:inline-block; animation:tick 26s linear infinite; font-size:12.5px; letter-spacing:3px; color:#fcee0a; font-family:"Cascadia Code",Consolas,monospace; }
@keyframes tick { to { transform:translateX(-50%); } }

/* ————— 数据面板 ————— */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat {
  border:1px solid #1e3a4d; background:rgba(12,20,32,.72); padding:20px 18px; text-align:center;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.stat .v { font-size:30px; font-weight:900; color:#00f0ff; font-family:"Cascadia Code",Consolas,monospace; }
.stat .v small { font-size:15px; }
.stat .k { font-size:11.5px; color:#5d7684; margin-top:4px; letter-spacing:2px; }

/* ————— 章节标题 ————— */
section { padding:54px 0 8px; }
.sec-head { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.sec-head .id { font-family:"Cascadia Code",Consolas,monospace; color:#ff2a6d; font-size:13px; border:1px solid #ff2a6d; padding:3px 10px; white-space:nowrap; }
.sec-head h2 {
  font-size:clamp(20px,3vw,26px); font-weight:900; letter-spacing:4px; text-transform:uppercase; color:#fff;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  background:linear-gradient(90deg,rgba(0,240,255,.16),transparent); padding:6px 40px 6px 14px;
}

/* ————— 面板 ————— */
.panel {
  border:1px solid #1e3a4d; background:rgba(12,20,32,.72); margin-bottom:20px; padding:24px 26px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:border-color .2s;
}
.panel:hover { border-color:rgba(0,240,255,.6); }
.panel .row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:baseline; }
.panel h3 { font-size:18px; color:#fff; letter-spacing:1px; }
.panel h3 .at { color:#00f0ff; font-size:14px; margin-left:10px; }
.panel .date { font-family:"Cascadia Code",Consolas,monospace; font-size:12px; color:#fcee0a; }
.panel p { font-size:13.5px; color:#9db8c4; margin-top:8px; }
.hl { color:#ff2a6d; font-weight:700; }
.hly { color:#fcee0a; font-weight:700; }
.hlc { color:#00f0ff; font-weight:700; }

/* ————— 多层缩进子块 ————— */
.sub { margin-top:14px; border-left:2px solid #1e3a4d; padding-left:16px; }
.sub .lbl { font-family:"Cascadia Code",Consolas,monospace; font-size:11px; letter-spacing:2px; color:#fcee0a; margin-bottom:5px; }
.sub p { margin-top:0; font-size:13.5px; color:#9db8c4; }

/* ————— 经历时间线 ————— */
.tl { position:relative; padding-left:34px; }
.tl::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(#00f0ff,#ff2a6d,#fcee0a); opacity:.5; }
.tl .node { position:relative; margin-bottom:34px; }
.tl .node::before {
  content:"◆"; position:absolute; left:-33px; top:2px; color:#00f0ff; font-size:14px;
  text-shadow:0 0 10px rgba(0,240,255,.8);
}
.tl .node:nth-child(2)::before { color:#ff2a6d; text-shadow:0 0 10px rgba(255,42,109,.8); }
.tl .node:nth-child(3)::before { color:#fcee0a; text-shadow:0 0 10px rgba(252,238,10,.8); }
.tl .node .panel { margin-bottom:0; }

/* ————— 项目卡片 ————— */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }
.pcard {
  display:block; text-decoration:none; border:1px solid #1e3a4d; background:rgba(12,20,32,.72);
  padding:22px 24px; position:relative;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:all .2s;
}
.pcard:hover { border-color:#00f0ff; transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,240,255,.12); }
.pcard .pno { font-family:"Cascadia Code",Consolas,monospace; font-size:12px; color:#ff2a6d; letter-spacing:2px; }
.pcard h3 { color:#fff; font-size:17.5px; margin:8px 0 6px; letter-spacing:1px; }
.pcard p { color:#9db8c4; font-size:13px; }
.pcard .foot { margin-top:14px; display:flex; justify-content:space-between; align-items:center; }
.pcard .res { font-size:11.5px; color:#fcee0a; font-family:"Cascadia Code",Consolas,monospace; }
.pcard .go { font-size:12px; color:#00f0ff; font-family:"Cascadia Code",Consolas,monospace; }
.pcard .thumb {
  height:120px; margin:-6px -8px 14px; border:1px dashed rgba(0,240,255,.4); background:rgba(0,240,255,.04);
  display:flex; align-items:center; justify-content:center; color:#5d7684; font-size:11.5px; letter-spacing:2px;
  font-family:"Cascadia Code",Consolas,monospace; text-align:center; padding:10px;
}

/* ————— 标签 ————— */
.tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.tags span {
  font-size:11px; letter-spacing:1px; color:#9db8c4; border:1px solid #1e3a4d; padding:4px 12px;
  font-family:"Cascadia Code",Consolas,monospace; background:rgba(12,20,32,.6);
}
.tags span:hover { border-color:#00f0ff; color:#00f0ff; }

/* ————— 图片插槽（占位，替换为真实图片） ————— */
.img-slot {
  border:1.5px dashed rgba(0,240,255,.5); background:rgba(0,240,255,.04);
  min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:#5d7684; text-align:center; padding:22px; margin:16px 0;
  font-family:"Cascadia Code",Consolas,monospace;
}
.img-slot .ico { font-size:24px; color:rgba(0,240,255,.6); }
.img-slot b { color:#9db8c4; font-weight:400; letter-spacing:2px; font-size:13px; }
.img-slot small { font-size:11px; letter-spacing:1px; }
.img-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.img-real { margin:16px 0; border:1px solid #1e3a4d; }
.img-real img { width:100%; display:block; }
.img-real figcaption { font-size:11.5px; color:#5d7684; letter-spacing:2px; padding:8px 12px; font-family:"Cascadia Code",Consolas,monospace; }

/* ————— 成果指标条 ————— */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:18px; }
.metric { border:1px solid rgba(252,238,10,.4); background:rgba(252,238,10,.05); padding:16px; text-align:center; }
.metric .v { font-size:24px; font-weight:900; color:#fcee0a; font-family:"Cascadia Code",Consolas,monospace; }
.metric .k { font-size:11.5px; color:#9db8c4; margin-top:4px; letter-spacing:1px; }

/* ————— 执行日志（编号行动列表） ————— */
.exec { counter-reset:step; }
.exec .step { position:relative; padding:14px 0 14px 58px; border-bottom:1px dashed #1e3a4d; }
.exec .step:last-child { border-bottom:none; }
.exec .step::before {
  counter-increment:step; content:"0" counter(step);
  position:absolute; left:0; top:14px;
  font-family:"Cascadia Code",Consolas,monospace; font-size:15px; font-weight:700; color:#ff2a6d;
  border:1px solid #ff2a6d; padding:3px 8px;
}
.exec .step b { color:#fff; font-size:14.5px; letter-spacing:1px; }
.exec .step p { font-size:13.5px; color:#9db8c4; margin-top:5px; }

/* ————— 上一页 / 下一页 ————— */
.prevnext { display:flex; justify-content:space-between; gap:14px; margin:44px 0 10px; flex-wrap:wrap; }
.prevnext a {
  flex:1; min-width:220px; text-decoration:none; border:1px solid #1e3a4d; padding:16px 20px;
  background:rgba(12,20,32,.72); transition:all .18s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.prevnext a:hover { border-color:#00f0ff; }
.prevnext .dir { font-size:11px; color:#5d7684; letter-spacing:2px; font-family:"Cascadia Code",Consolas,monospace; }
.prevnext .name { color:#fff; font-size:14.5px; margin-top:4px; letter-spacing:1px; }
.prevnext a.next { text-align:right; }

/* ————— 入口大卡（首页导航） ————— */
.gates { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.gate {
  display:block; text-decoration:none; border:1px solid #1e3a4d; padding:28px 26px;
  background:rgba(12,20,32,.72); position:relative; overflow:hidden; transition:all .2s;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.gate::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,#00f0ff,#ff2a6d); opacity:0; transition:opacity .2s; }
.gate:hover { border-color:#00f0ff; transform:translateY(-4px); }
.gate:hover::before { opacity:1; }
.gate .gno { font-family:"Cascadia Code",Consolas,monospace; font-size:12px; color:#fcee0a; letter-spacing:2px; }
.gate h3 { color:#fff; font-size:20px; letter-spacing:2px; margin:10px 0 8px; }
.gate p { color:#9db8c4; font-size:13px; }
.gate .go { display:inline-block; margin-top:16px; color:#00f0ff; font-size:12px; letter-spacing:2px; font-family:"Cascadia Code",Consolas,monospace; }

/* ————— 课程 / 技能芯片 ————— */
.chip-wall { display:flex; flex-wrap:wrap; gap:10px; }
.chip-wall span {
  font-size:12.5px; color:#d6f4ff; border:1px solid #1e3a4d; padding:7px 15px; letter-spacing:1px;
  background:rgba(12,20,32,.6); transition:all .18s;
}
.chip-wall span:hover { border-color:#ff2a6d; color:#ff2a6d; box-shadow:0 0 14px rgba(255,42,109,.25); }

/* ————— 页脚 ————— */
footer {
  border-top:1px solid #1b2a3a; margin-top:70px; padding:34px 26px 44px; text-align:center;
  font-family:"Cascadia Code",Consolas,monospace; font-size:12px; color:#5d7684; letter-spacing:1px;
  position:relative; z-index:2;
}
footer a { color:#00f0ff; text-decoration:none; }
footer .sig { color:#ff2a6d; }

@media (max-width:640px) {
  .topnav .inner { justify-content:center; }
  .tl { padding-left:24px; }
  .tl .node::before { left:-27px; }
  .panel { padding:18px 18px; }
}