/* ============ 暗黑科技感个人主页 ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* hidden 属性优先级兜底：防止 display:flex 等覆盖 hidden */
[hidden] {
  display: none !important;
}

:root {
  --bg: #04060d;
  --accent: #4f7cff;
  --accent2: #9b5cff;
  --text: #e8ecf5;
  --text-dim: #5d6b8a;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  /* 纵向排列：hero 居中，页脚在下面整行铺开（原来横向会把页脚排到 hero 右侧把内容挤偏） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  user-select: none;
}

/* 内容超出屏幕时可滚动，内容少时保持垂直居中 */
.hero {
  margin: auto;
}

/* ---------- 背景层（纯静态：点点 + 线条 + 光斑，零动画零 JS） ---------- */
.dots-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(120, 160, 255, 0.22) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(155, 92, 255, 0.14) 1px, transparent 1.6px);
  background-size: 34px 34px, 52px 52px;
  background-position: 0 0, 17px 26px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 78%);
}

.grid-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(79, 124, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 124, 255, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 75%);
}

.glow-orb {
  position: fixed;
  z-index: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.orb-a {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.55), transparent 70%);
  top: -80px;
  left: -60px;
}

.orb-b {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.5), transparent 70%);
  bottom: -100px;
  right: -80px;
}

/* ---------- 主体 ---------- */
.hero {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 24px;
  animation: hero-in 1.2s ease both;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* 头像 */
.avatar-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  max-width: 64vw;
  margin: 0 auto 28px;
}

.avatar {
  position: absolute;
  inset: 6px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b1020, #0b1020) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
  box-shadow:
    0 0 24px rgba(79, 124, 255, 0.55),
    0 0 60px rgba(155, 92, 255, 0.28);
  z-index: 2;
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 62px;
}

.avatar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px dashed rgba(120, 160, 255, 0.5);
  animation: spin 12s linear infinite;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 名称 */
.name {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #dfe8ff 20%, var(--accent) 55%, var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(79, 124, 255, 0.35);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 18px 0 14px;
}

.divider-line {
  width: min(120px, 26vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, 0.6));
}

.divider-line:last-child {
  background: linear-gradient(90deg, rgba(120, 160, 255, 0.6), transparent);
}

.divider-star {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(120, 160, 255, 0.9);
  font-size: 14px;
}

.subtitle {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.slogan {
  margin-top: 10px;
  font-size: 14px;
  color: #8fa0c4;
  letter-spacing: 8px;
}

/* ---------- 链接按钮 ---------- */
.links {
  margin-top: 30px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.tech-btn {
  padding: 9px 26px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 255, 0.45);
  color: #b9c8ff;
  font-size: 13px;
  letter-spacing: 3px;
  text-decoration: none;
  background: rgba(79, 124, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
}

.tech-btn:hover {
  border-color: #4f7cff;
  color: #fff;
  box-shadow:
    0 0 18px rgba(79, 124, 255, 0.45),
    inset 0 0 12px rgba(79, 124, 255, 0.18);
  transform: translateY(-2px);
}

.tech-btn:active {
  transform: translateY(0);
}

/* ---------- 分类纵向分区 ---------- */
.cat-section {
  margin-top: 34px;
}

.cat-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cat-label {
  font-size: 12px;
  letter-spacing: 4px;
  color: #93a5cc;
  white-space: nowrap;
}

.cat-line {
  width: min(70px, 16vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, 0.55));
}

.cat-line:last-child {
  background: linear-gradient(90deg, rgba(120, 160, 255, 0.55), transparent);
}

.cat-section .links {
  margin-top: 0;
}

/* ---------- HUD 装饰 ---------- */
.hud {
  position: fixed;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.hud-tl {
  top: 18px;
  left: 22px;
}

.hud-br {
  bottom: 18px;
  right: 22px;
}

.hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* 服务器状态（右下角，和 HUD 同一套风格） */
.sys-status {
  position: fixed;
  left: 22px;
  bottom: 16px;
  z-index: 4;
  width: 208px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 160, 255, 0.18);
  border-radius: 10px;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(6px);
  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: left;
}
.sys-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sys-row:last-of-type { margin-bottom: 0; }
.sys-k { width: 30px; }
.sys-bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.sys-bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: #4f7cff; transition: width .5s; }
.sys-row:nth-child(2) .sys-bar > i { background: #9b5cff; }
.sys-row:nth-child(3) .sys-bar > i { background: #f5a623; }
.sys-v { width: 30px; text-align: right; }
.sys-foot { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 9.5px; line-height: 1.6; }
@media (max-width: 700px) {
  .sys-status { left: 12px; right: 12px; width: auto; bottom: 44px; }
}

.footer {
  /* 备案号跟随内容排列，不再 fixed 覆盖页面内容 */
  position: static;
  width: 100%;
  box-sizing: border-box;
  margin: 34px 0 22px;
  padding: 0 14px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: #3d4a68;
  line-height: 1.9;
}
/* 内容底部留出空间，避免贴太紧 */
body { padding-bottom: 8px; }

@media (max-width: 480px) {
  .avatar-wrap {
    width: 126px;
    height: 126px;
    margin-bottom: 22px;
  }
  .slogan {
    letter-spacing: 4px;
  }
  .hud {
    font-size: 9px;
  }
}