:root{
  /* 赛博朋克调色 */
  --bg:#07080d;          /* 深夜黑 */
  --panel:#0c0f16;       /* 玻璃黑 */
  --text:#e6f1ff;        /* 淡蓝白 */
  --muted:#9ab0c8;       /* 冷灰蓝 */
  --accent:#00e0ff;      /* 霓虹青 */
  --accent2:#ff00e0;     /* 霓虹紫粉 */
  --accent3:#00ff6a;     /* 霓虹绿 */
  --border:#1a2030;      /* 冷边框 */
  --glow:0 0 24px rgba(0,224,255,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 10% 0%,rgba(0,224,255,.06),transparent 60%),radial-gradient(1000px 700px at 90% 100%,rgba(255,0,224,.05),transparent 60%),var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1040px;margin:0 auto;padding:0 16px}

/* 分栏布局与侧边霓虹导航 */
.layout{display:grid;grid-template-columns:240px 1fr;gap:20px}
.side-nav{position:sticky;top:16px;align-self:start;height:calc(100vh - 32px)}
.side-nav nav{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(0,224,255,.05),rgba(255,0,224,.04));box-shadow:var(--glow)}
.side-nav a{display:block;padding:10px 12px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:rgba(12,15,22,.6)}
.side-nav a:hover{background:rgba(0,224,255,.08)}
.side-nav a.active{outline:2px solid var(--accent);box-shadow:0 0 0 2px rgba(0,224,255,.25) inset}
.content{min-width:0}

.site-header{background:linear-gradient(180deg,rgba(0,224,255,.08) 0,rgba(255,0,224,.06) 100%);border-bottom:1px solid var(--border);padding:48px 0;position:relative;overflow:hidden}
.site-header:after{content:"";position:absolute;inset:auto -20% -60% -20%;height:240px;background:conic-gradient(from 120deg at 50% 50%,rgba(0,224,255,.12),rgba(255,0,224,.12),rgba(0,255,106,.12));filter:blur(50px);opacity:.6;pointer-events:none}
.site-header .name{margin:0;font-size:34px;letter-spacing:.5px}
.site-header .subtitle{margin:4px 0 12px;color:var(--muted)}
.contact{display:flex;flex-wrap:wrap;gap:10px 16px;padding:0;margin:8px 0 0;list-style:none;color:var(--muted)}
.contact a{color:var(--text)}
#summary p{border-left:2px solid var(--accent);padding-left:12px}

main section{padding:28px 0;border-bottom:1px solid var(--border)}
main h2{margin:0 0 12px;font-size:22px}
main h3{margin:12px 0 6px;font-size:18px}
.meta{color:var(--muted);font-size:14px}

#skills .skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#skills ul{margin:0;padding-left:18px}

#projects .featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.featured-item{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:14px}
.featured-item h4{margin:0 0 10px}

.embed-wrap{position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#0b1016}
.embed-wrap iframe{display:block;width:100%;height:360px;border:0}
.embed-wrap .embed-fallback{display:none;padding:14px;color:var(--muted)}
.embed-wrap.error .embed-fallback{display:block}

.repo-list{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.repo-card{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.repo-card .title{font-weight:600}
.repo-card .desc{color:var(--muted)}
.repo-card .meta{display:flex;gap:10px;color:var(--muted);font-size:14px}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px;color:var(--muted)}
.loading,.error{color:var(--muted)}

.site-footer{padding:28px 0;color:var(--muted)}

/* 赛博朋克装饰与UTown插图区域 */
.project-block{border:1px solid var(--border);background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(255,0,224,.04));border-radius:12px;padding:16px;box-shadow:var(--glow)}
.muted{color:var(--muted)}
.shots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.shot{margin:0}
.shot img{width:100%;height:180px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.shot figcaption{margin-top:6px;color:var(--muted);font-size:13px}

.repo-toggle{margin-top:4px}
.repo-toggle button{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001018;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 0 0 1px var(--border),0 4px 18px rgba(0,224,255,.25)}
.repo-toggle button:hover{filter:saturate(1.2)}

.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.blog-card{display:block;border:1px solid var(--border);border-radius:12px;padding:0;background:linear-gradient(180deg,rgba(0,224,255,.05),rgba(255,0,224,.04));box-shadow:var(--glow);overflow:hidden}
.blog-card .cover{width:100%;height:160px;background:#0b1016;border-bottom:1px solid var(--border)}
.blog-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card .blog-title,.blog-card .blog-meta{padding:10px 14px}
.blog-title{font-weight:600;margin-bottom:6px}
.blog-meta{color:var(--muted);font-size:13px}
.blog-card:hover .cover img{transform:scale(1.02);transition:transform .3s ease}

@media (max-width: 800px){
  .layout{grid-template-columns:1fr}
  .side-nav{position:static;height:auto}
  #skills .skills-grid{grid-template-columns:1fr}
  #projects .featured-grid{grid-template-columns:1fr}
  .repo-list{grid-template-columns:1fr}
  .embed-wrap iframe{height:260px}
  .shots-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
}