* { margin:0; padding:0; box-sizing:border-box; font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif; }
body { background:#050509; color:#e5e7eb; line-height:1.7; transition:all 0.4s ease; }

/* 白天模式 */
body.light-mode {
  background:#f8fafc;
  color:#1e293b;
}
body.light-mode #galaxy-bg {
  display:none;
}
body.light-mode .navbar {
  background:rgba(255,255,255,0.85);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
body.light-mode .logo { color:#0891b2; }
body.light-mode .nav-menu a { color:#475569; }
body.light-mode .nav-menu a:hover { color:#0f172a; background:rgba(8,145,178,0.08); }
body.light-mode .hero { background:linear-gradient(145deg,#f8fafc,#e2e8f0); }
body.light-mode .hero-content p { color:#64748b; }
body.light-mode .stat-item h2 { color:#0891b2; }
body.light-mode .stat-item p { color:#64748b; }
body.light-mode .title { color:#0f172a; }
body.light-mode .title::after { background:linear-gradient(90deg,#0891b2,#0ea5e9); }
body.light-mode .card { background:rgba(255,255,255,0.7); border-color:rgba(8,145,178,0.15); }
body.light-mode .card h3 { color:#0f172a; }
body.light-mode .card p { color:#475569; }
body.light-mode .sys-card { background:rgba(255,255,255,0.7); border-color:rgba(8,145,178,0.15); }
body.light-mode .sys-card h3 { color:#0f172a; }
body.light-mode .sys-card p { color:#475569; }
body.light-mode .sys-link { color:#0891b2; }
body.light-mode .timeline-item .time { color:#0891b2; border-color:rgba(8,145,178,0.3); background:rgba(8,145,178,0.06); }
body.light-mode .timeline-item .content { color:#334155; }
body.light-mode #comment-form input,
body.light-mode #comment-form textarea { background:rgba(255,255,255,0.9); border-color:rgba(8,145,178,0.2); color:#1e293b; }
body.light-mode footer { border-top-color:rgba(0,0,0,0.06); color:#64748b; }

#galaxy-bg {
  position: fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:-2; pointer-events:none;
  background:url('assets/galaxy-bg.jpg') center center / cover no-repeat;
  opacity:0.2;
}

.navbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 6%; position:fixed; width:100%; top:0;
  background:rgba(5,5,9,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.04); z-index:999;
}
.logo { font-size:22px; font-weight:600; color:#47e5d8; display:flex; align-items:center; gap:6px; letter-spacing:1px; }
.nav-menu { display:flex; align-items:center; gap:4px; }
.nav-menu a {
  color:#8892a0; text-decoration:none; padding:6px 14px; border-radius:8px;
  font-size:14px; font-weight:500; transition:all .25s;
}
.nav-menu a:hover { color:#e5e7eb; background:rgba(71,229,216,0.06); }

.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(145deg,#050509,#0a0e18); padding:100px 6% 80px;
}
.hero-content h1 {
  font-size:52px; font-weight:700; margin-bottom:16px; letter-spacing:-1px;
  background:linear-gradient(135deg,#47e5d8,#60a5fa,#47e5d8); -webkit-background-clip:text; color:transparent;
  background-size:200% 200%;
}
.hero-content p { font-size:17px; color:#6b7280; margin-bottom:35px; letter-spacing:2px; font-weight:400; }
.btn {
  padding:12px 34px; background:#47e5d8; color:#000; text-decoration:none;
  border-radius:50px; font-weight:600; font-size:14px; transition:all .3s; display:inline-block;
}
.btn:hover { background:#2cccbf; transform:translateY(-2px); box-shadow:0 8px 30px rgba(71,229,216,0.15); }

.stats {
  display:grid; grid-template-columns:repeat(4,1fr); padding:60px 6%;
  text-align:center;
}
.stat-item h2 { font-size:36px; font-weight:700; color:#47e5d8; margin-bottom:6px; }
.stat-item p { color:#6b7280; font-size:14px; font-weight:400; }

.section { padding:80px 6%; }
.systems {  }
.title {
  text-align:center; font-size:28px; font-weight:600; margin-bottom:48px; color:#f0f4f8;
  position:relative; padding-bottom:20px;
}
.title::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:50px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#47e5d8,#60a5fa);
}

.project-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card {
  background:rgba(14,14,26,0.5); padding:32px; border-radius:16px;
  border:1px solid rgba(71,229,216,0.08); transition:all .35s;
}
.card:hover { transform:translateY(-6px); border-color:#47e5d8; box-shadow:0 12px 40px rgba(71,229,216,0.05); }
.card-icon { font-size:28px; margin-bottom:14px; display:block; }
.card h3 { margin-bottom:12px; color:#f1f5f9; font-size:18px; font-weight:600; }
.card p { color:#6b7280; font-size:14px; line-height:1.7; }

.systems-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.sys-card {
  background:rgba(14,14,26,0.5); border:1px solid rgba(71,229,216,0.08); border-radius:16px;
  padding:26px; text-decoration:none; color:inherit; transition:all .35s;
  display:flex; flex-direction:column;
}
.sys-card:hover { transform:translateY(-4px); border-color:#47e5d8; box-shadow:0 8px 30px rgba(71,229,216,0.04); }
.sys-icon { font-size:30px; margin-bottom:12px; }
.sys-card h3 { font-size:15px; color:#f1f5f9; margin-bottom:6px; font-weight:600; }
.sys-card p { font-size:13px; color:#6b7280; flex:1; line-height:1.6; }
.sys-link { margin-top:12px; color:#47e5d8; font-size:13px; font-weight:500; }

.downloads {  }
.download-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;
  max-width:1000px; margin:0 auto;
}
.download-card {
  display:flex; align-items:center; gap:14px;
  background:rgba(14,14,26,0.5); border:1px solid rgba(71,229,216,0.08); border-radius:14px;
  padding:16px 18px; text-decoration:none; color:inherit; transition:all .3s;
}
.download-card:hover { border-color:#47e5d8; transform:translateY(-3px); }
.download-card.placeholder { opacity:0.45; }
.download-card.placeholder:hover { border-color:#4a5568; transform:none; }
.dl-icon { font-size:24px; flex-shrink:0; }
.dl-body { flex:1; min-width:0; }
.dl-name { font-size:14px; font-weight:600; color:#f1f5f9; margin-bottom:2px; }
.dl-desc { font-size:12px; color:#6b7280; }
.dl-btn {
  flex-shrink:0; padding:6px 14px; border-radius:8px;
  background:#47e5d8; color:#000; font-size:12px; font-weight:600; transition:.2s;
}
.download-card:hover .dl-btn { background:#2cccbf; }
.download-card.placeholder .dl-btn { background:#1e293b; color:#6b7280; }

.timeline-wrap {  }
.timeline { max-width:1100px; margin:60px auto 0; display:flex; gap:40px; align-items:stretch; }
.timeline-left { flex:1; border-left:2px solid rgba(71,229,216,0.15); padding-left:35px; }
.timeline-right { width:320px; flex-shrink:0; display:flex; align-items:center; position:relative; }
.timeline-right img { width:100%; border-radius:16px; border:1px solid rgba(71,229,216,0.08); position:absolute; top:0; left:0; transition:opacity 1.2s ease-in-out; }
.timeline-right .c-active { opacity:1; position:relative !important; }
.timeline-right .c-inactive { opacity:0; }
.timeline-item { margin-bottom:40px; position:relative; }
.timeline-item::before {
  content:""; width:12px; height:12px; background:#47e5d8; border-radius:50%;
  position:absolute; left:-40px; top:6px; box-shadow:0 0 20px rgba(71,229,216,0.3);
}
.time { color:#47e5d8; font-weight:700; margin-bottom:6px; font-size:15px; letter-spacing:1px; }
.content { color:#8892a0; font-size:15px; line-height:1.7; }

.contact { text-align:center; padding:60px 6% 80px; }
.contact p { font-size:16px; margin:10px 0; color:#6b7280; }

footer { text-align:center; padding:30px; color:#4a5568; font-size:13px; }

.about-wrap { padding-top:120px; max-width:860px; margin:0 auto; padding-left:6%; padding-right:6%; }
.about-wrap .section { padding:50px 0; }
.tag { display:inline-block; background:rgba(71,229,216,0.08); color:#47e5d8; padding:3px 12px; border-radius:12px; font-size:12px; margin:2px 4px; }
.bookshelf-section { text-align:center; }
.bookshelf-section a { display:inline-block; text-decoration:none; color:inherit; }
.bookshelf-section img { max-width:50%; border-radius:14px; border:1px solid rgba(71,229,216,0.08); transition:.3s; display:block; margin:0 auto; }
.bookshelf-section img:hover { border-color:#47e5d8; transform:translateY(-4px); }
.bookshelf-section .url { color:#47e5d8; font-size:13px; margin-top:8px; display:block; }

/* Gallery page (index.html) */
.g-hero { padding:120px 6% 50px; text-align:center; }
.g-hero h1 { font-size:34px; font-weight:700; margin-bottom:8px; background:linear-gradient(135deg,#47e5d8,#60a5fa); -webkit-background-clip:text; color:transparent; }
.g-hero p { color:#6b7280; font-size:15px; }
.g-section { padding:30px 6% 50px; }
.g-section .title { font-size:22px; margin-bottom:20px; }
.g-section .title::after { width:36px; }
.g-hero-img { max-width:50%; border-radius:14px; border:1px solid rgba(71,229,216,0.08); cursor:pointer; transition:.35s; }
.g-hero-img:hover { border-color:#47e5d8; }
.g-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.g-grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.g-img { width:100%; border-radius:10px; cursor:pointer; border:1px solid rgba(71,229,216,0.06); transition:.35s; display:block; }
.g-img:hover { border-color:#47e5d8; transform:translateY(-4px); box-shadow:0 8px 25px rgba(71,229,216,0.05); }

@media(max-width:768px) {
  .navbar { padding:0.8rem 4%; }
  .logo { font-size:13px; }
  .logo-text { display:none; }
  .nav-menu a { padding:5px 10px; font-size:14px; }
  .hero { min-height:auto; padding:90px 5% 50px; }
  .hero-content h1 { font-size:22px; }
  .hero-content p { font-size:16px; letter-spacing:1px; }
  .stats { grid-template-columns:1fr; padding:36px 5%; gap:24px; }
  .stat-item h2 { font-size:26px; }
  .section { padding:50px 5%; }
  .title { font-size:24px; margin-bottom:32px; padding-bottom:16px; }
  .title::after { width:36px; height:2px; }
  .project-list { grid-template-columns:1fr; gap:16px; }
  .card { padding:22px; }
  .card-icon { font-size:22px; }
  .card h3 { font-size:16px; }
  .card p { font-size:13px; }
  .systems-grid { gap:10px; }
  .sys-card { padding:18px; }
  .hero-sm { padding:90px 5% 30px; }
  .hero-sm h1 { font-size:24px; }
  .timeline { flex-direction:column; gap:24px; margin-top:40px; }
  .timeline-left { padding-left:24px; }
  .timeline-right { width:100%; max-width:240px; margin:0 auto; }
  .timeline-item { margin-bottom:28px; }
  .timeline-item::before { left:-29px; width:10px; height:10px; }
  .content { font-size:14px; }
  .download-grid { grid-template-columns:1fr; }
  .about-wrap { padding-top:90px; }
  .about-wrap .section { padding:30px 0; }
  .bookshelf-section img { max-width:80%; }
  .g-hero { padding:90px 5% 30px; }
  .g-hero h1 { font-size:24px; }
  .g-section { padding:20px 5% 36px; }
  .g-section .title { font-size:18px; margin-bottom:14px; }
  .g-hero-img { max-width:80% !important; }
  .g-grid-4, .g-grid-5 { grid-template-columns:repeat(2,1fr); gap:8px; }
  footer { padding:20px; font-size:12px; }
  .contact { padding:40px 5% 50px; }
  .contact p { font-size:14px; }
}

@media(max-width:480px) {
  .nav-menu a { font-size:13px; padding:4px 7px; }
  .hero-content p { font-size:14px; letter-spacing:0.5px; }
  .stat-item h2 { font-size:22px; }
  .title { font-size:20px; }
  .card h3 { font-size:15px; }
  .hero-content h1 { font-size:18px; }
  .g-hero h1 { font-size:18px; }
  .g-section .title { font-size:16px; }
  .g-grid-4, .g-grid-5 { gap:6px; }
  .g-img { border-radius:8px; }
  .g-hero-img { border-radius:10px; }
}

@media(max-width:360px) {
  .nav-menu a { font-size:12px; padding:3px 5px; }
  .hero-content h1 { font-size:16px; }
  .logo { font-size:15px; }
}