*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--c1:#00f0ff;--c2:#7b2dff;--c3:#ff2d7b;--bg:#030305;--bg2:#080810;--bg3:#0c0c18;--fg:#e8e8f0;--fg2:#8888a0;--fg3:#6a6a80;--border:rgba(0,240,255,0.08);--radius:16px}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased;touch-action:manipulation;line-height:1.6}

/* 通用工具类 */
.hidden{display:none}

/* 背景层 */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;opacity:0.1;will-change:transform}
.glow-1{width:500px;height:500px;background:var(--c1);top:-10%;right:-5%;animation:drift 12s ease-in-out infinite}
.glow-2{width:400px;height:400px;background:var(--c2);bottom:-5%;left:-10%;animation:drift 15s ease-in-out infinite reverse}
.glow-3{width:300px;height:300px;background:var(--c3);top:40%;left:30%;animation:drift 10s ease-in-out infinite;opacity:0.06}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(0.95)}}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(0,240,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,0.015) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%)}
.scanline{position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,0.015) 2px,rgba(0,240,255,0.015) 4px)}

/* 状态栏 */
.status-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg2);border-bottom:1px solid var(--border);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);background:rgba(3,3,5,0.65);height:48px}
.status-bar .left{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
.status-bar .right{display:flex;align-items:center;gap:1.2rem;flex-shrink:0}
.status-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--c1);box-shadow:0 0 8px var(--c1);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.status-bar .nav-link{color:var(--fg2);text-decoration:none;transition:all 0.3s ease;position:relative;white-space:nowrap;padding:0.2rem 0}
.status-bar .nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--c1);transition:width 0.3s ease}
.status-bar .nav-link:hover{color:var(--c1)}
.status-bar .nav-link:hover::after{width:100%}
.status-bar .nav-link.active{color:var(--c1);text-shadow:0 0 12px rgba(0,240,255,0.6)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* 公共动画 */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* 页脚 */
.footer{text-align:center;color:var(--fg2);font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;margin-top:4rem;padding-bottom:2rem}
.footer a{color:var(--fg2);text-decoration:none;transition:color 0.3s ease}
.footer a:hover{color:var(--c1)}

/* 页面头部 */
.page-header{text-align:center;margin-bottom:3rem;animation:fadeInUp 0.8s ease both}
.page-header h1{font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:6px;margin-bottom:0.5rem;color:var(--c1);text-shadow:0 0 40px rgba(0,240,255,0.2)}
.page-header p{color:var(--fg2);font-size:0.85rem;letter-spacing:2px}

/* 空状态 */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--fg2);font-size:0.85rem;letter-spacing:1px}

/* Toast */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:0.8rem 1.5rem;color:var(--fg);font-size:0.85rem;z-index:3000;opacity:0;transition:all 0.3s ease;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{border-color:rgba(255,45,123,0.3);color:var(--c3)}
.toast.success{border-color:rgba(0,240,255,0.3);color:var(--c1)}
.toast.warn{border-color:rgba(240,192,64,0.3);color:#f0c040}

/* 响应式 */
@media(max-width:640px){
  .status-bar{padding:0 1rem;height:44px;font-size:0.6rem}
  .status-bar .right{gap:0.8rem}
  .status-bar .nav-link{font-size:0.6rem;letter-spacing:1px}
  .status-bar .left{font-size:0.6rem;letter-spacing:1px}
  .page-header h1{font-size:clamp(1.8rem,5vw,2.5rem)}
  /* 移动端减负：隐藏扫描线、光晕模糊半径减半（粒子数量在 common.js 中同步减半） */
  .scanline{display:none}
  .glow{filter:blur(70px)}
}
@media(max-width:480px){
  .status-bar .right span{display:none}
  .status-bar .right{gap:0.6rem}
}
@media(max-width:360px){
  .status-bar{padding:0 0.8rem}
  .status-bar .right{gap:0.5rem}
}