* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0d1117;
  background-image: radial-gradient(circle at 50% 20%, #16202e 0%, #0d1117 70%);
  color: #e6edf3;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  min-height: 100vh;
}
.stage-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; }
.page-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
  color: #58a6ff;
  letter-spacing: 2px;
}
.stage {
  position: relative;
  height: 460px;
  background: linear-gradient(180deg, #131c29 0%, #0f1620 100%);
  border: 1px solid #2a3a4d;
  border-radius: 12px;
  overflow: hidden;
}
.part { position: absolute; opacity: 0; transition: transform 1s ease, opacity 1s ease; }
.part-label {
  position: absolute;
  font-size: 12px;
  color: #8b949e;
  background: rgba(13,17,23,.75);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}
/* 起始位置（飞入前，藏在四面） */
.part.from-top { transform: translateY(-360px); }
.part.from-bottom { transform: translateY(360px); }
.part.from-left { transform: translateX(-620px); }
.part.from-right { transform: translateX(620px); }
.part.installed { opacity: 1; transform: none; }

/* 机箱：中央竖式轮廓 */
.case { left: 330px; top: 40px; width: 240px; height: 380px; }
.case-frame {
  width: 100%; height: 100%;
  border: 3px solid #4a5a6e;
  border-radius: 8px;
  background: linear-gradient(135deg, #1c2735 0%, #141c28 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
.case-side {
  position: absolute; left: 16px; top: 16px; right: 16px; bottom: 16px;
  border: 1px dashed #33445a; border-radius: 6px;
}
.case .part-label { left: 100px; top: -22px; }

/* 主板 */
.board { left: 355px; top: 70px; width: 190px; height: 320px; }
.board-base {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1f4d3a 0%, #17402f 100%);
  border: 2px solid #35b580; border-radius: 4px;
}
.board-chip {
  position: absolute; left: 55px; top: 55px;
  width: 80px; height: 80px;
  border: 1px solid #35b580; border-radius: 4px;
  background: rgba(53,181,128,.12);
}
.board .part-label { right: -40px; top: 10px; }

/* CPU：装在主板芯片位置 */
.cpu { left: 375px; top: 165px; width: 80px; height: 80px; }
.cpu-base {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #b8c4d0 0%, #8a97a5 100%);
  border: 2px solid #e6edf3; border-radius: 3px;
  box-shadow: 0 0 12px rgba(230,237,243,.35);
}
.cpu .part-label { left: 90px; top: 28px; }

/* 内存：两根竖条 */
.ram { left: 335px; top: 70px; width: 120px; height: 240px; }
.ram-bar {
  position: absolute; top: 0;
  width: 16px; height: 240px;
  background: linear-gradient(180deg, #2f81f7 0%, #1a5fc4 100%);
  border: 1px solid #6cb0ff; border-radius: 2px;
}
.ram-bar1 { left: 20px; }
.ram-bar2 { left: 64px; }
.ram .part-label { left: 130px; top: 100px; }

/* 硬盘 */
.disk { left: 440px; top: 330px; width: 130px; height: 44px; }
.disk-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #3a4452 0%, #262e3a 100%);
  border: 1px solid #5a6b80; border-radius: 4px;
}
.disk .part-label { left: 0; top: -20px; }

/* 显卡 */
.gpu { left: 300px; top: 250px; width: 220px; height: 46px; }
.gpu-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #4a3020 0%, #2e1e12 100%);
  border: 2px solid #d29922; border-radius: 4px;
}
.gpu-fan {
  position: absolute; left: 90px; top: 7px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #d29922;
  background: radial-gradient(circle, #d29922 0%, transparent 70%);
}
.gpu .part-label { left: 0; top: -22px; }

/* 电源 */
.psu { left: 320px; top: 340px; width: 130px; height: 66px; }
.psu-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2a2f3a 0%, #1a1e26 100%);
  border: 2px solid #6e7a8a; border-radius: 4px;
}
.psu-fan {
  position: absolute; left: 14px; top: 10px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #8a97a5;
  background: radial-gradient(circle, #8a97a5 0%, transparent 70%);
}
.psu .part-label { left: 140px; top: 22px; }

/* 按钮区 */
.controls { text-align: center; margin: 24px 0 20px; }
.btn-main, .btn-sub {
  font-size: 16px; padding: 10px 30px; margin: 0 10px;
  border-radius: 8px; cursor: pointer; border: none;
}
.btn-main { background: #2f81f7; color: #fff; }
.btn-main:hover { background: #58a6ff; }
.btn-main:disabled { background: #26416b; cursor: not-allowed; }
.btn-sub { background: transparent; color: #58a6ff; border: 1px solid #2a3a4d; }
.btn-sub:disabled { color: #3d4a5c; cursor: not-allowed; }

/* 介绍区 */
.intro {
  min-height: 110px;
  background: #131c29;
  border: 1px solid #2a3a4d; border-radius: 10px;
  padding: 16px 20px;
}
.intro-empty { color: #6a7686; text-align: center; line-height: 80px; }
.intro h3 { color: #58a6ff; font-size: 18px; margin-bottom: 8px; }
.intro p { font-size: 14px; line-height: 1.8; color: #c9d1d9; }
.intro .tip { color: #d29922; font-size: 13px; margin-top: 6px; }