/* ===== 星神宇宙 官网样式 v1.0 ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #0a0a14;
  --bg2: #111122;
  --bg3: #1a1a30;
  --text: #e0e0e8;
  --text2: #9898b0;
  --text3: #606880;
  --accent: #a078e0;
  --accent2: #6a48b0;
  --border: #2a2a44;
  --gold: #d4a048;
  --font: "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.8; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }
img { max-width: 100%; }
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* ===== Stars BG ===== */
.stars { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.star { position:absolute; border-radius:50%; background:#fff; animation: twinkle 4s ease-in-out infinite alternate; opacity:0.3; }
@keyframes twinkle { 0%{opacity:0.2} 100%{opacity:0.8} }

/* ===== Header ===== */
.site-header { position:sticky; top:0; z-index:10; background:rgba(10,10,20,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:56px; }
.logo { font-size:18px; font-weight:700; color:var(--gold) !important; letter-spacing:2px; }
.main-nav a { font-size:14px; color:var(--text2); margin-left:24px; padding:4px 0; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color:var(--text); border-bottom-color:var(--accent); }

/* ===== Hero ===== */
.hero { position:relative; z-index:1; padding:100px 0 80px; text-align:center; }
.hero-title { font-size:48px; font-weight:700; color:var(--gold); letter-spacing:4px; margin-bottom:16px; }
.hero-subtitle { font-size:18px; color:var(--text2); margin-bottom:24px; }
.hero-desc { font-size:14px; color:var(--text3); line-height:1.9; max-width:640px; margin:0 auto 40px; }

/* ===== Buttons ===== */
.btn-primary, .btn-secondary { display:inline-block; padding:12px 32px; border-radius:6px; font-size:15px; font-weight:500; cursor:pointer; transition:all .2s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent2); color:#fff; }
.btn-secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-secondary:hover { background:var(--accent); color:#fff; }

/* ===== Sections ===== */
.section { position:relative; z-index:1; padding:60px 0; }
.section.bg-gray { background:var(--bg2); }
.section-title { font-size:22px; font-weight:600; color:var(--gold); margin-bottom:32px; text-align:center; letter-spacing:2px; }

/* ===== Chapter Card ===== */
.latest-chapter-card { display:flex; gap:20px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:24px; margin-bottom:24px; align-items:flex-start; }
.chapter-badge { display:inline-block; background:var(--accent); color:#fff; font-size:12px; padding:4px 12px; border-radius:4px; white-space:nowrap; font-weight:500; }
.chapter-info h3 { font-size:16px; margin-bottom:6px; }
.chapter-info h3 a { color:var(--text); }
.chapter-info h3 a:hover { color:var(--gold); }
.chapter-meta { font-size:13px; color:var(--text3); line-height:1.7; }

/* ===== Info Grid ===== */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.info-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:28px 24px; text-align:center; }
.card-icon { font-size:28px; color:var(--gold); margin-bottom:12px; }
.info-card h3 { font-size:15px; margin-bottom:8px; color:var(--text); }
.info-card p { font-size:13px; color:var(--text3); line-height:1.7; }

/* ===== Chapter List ===== */
.chapter-list { max-width:600px; margin:0 auto; }
.chapter-item { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); transition:background .2s; }
.chapter-item:hover { background:var(--bg2); }
.chapter-item .num { font-size:13px; color:var(--text3); min-width:60px; }
.chapter-item .title { font-size:14px; color:var(--text); }
.chapter-item .title:hover { color:var(--gold); }
.chapter-item .time { font-size:12px; color:var(--text3); }

/* ===== Chapter Page ===== */
.chapter-page { position:relative; z-index:1; padding:40px 0 80px; }
.chapter-header { text-align:center; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.chapter-header .ch-num { font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:3px; margin-bottom:8px; }
.chapter-header h1 { font-size:28px; font-weight:600; color:var(--gold); margin-bottom:6px; }
.chapter-header .ch-time { font-size:13px; color:var(--text3); }
.chapter-nav { display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); }
.chapter-nav a { font-size:14px; }
.nav-disabled { color:var(--text3) !important; pointer-events:none; opacity:0.4; }

/* ===== Chapter Content ===== */
.chapter-content { font-size:15px; color:var(--text); line-height:1.8; max-width:700px; margin:0 auto; }
.chapter-content p { margin-bottom:0.55em; text-indent:2em; }
.chapter-content p:first-of-type { text-indent:0; }
.chapter-content p:last-of-type { margin-bottom:0; }
.scene-break { height:1.2em; }
.chapter-content strong { color:var(--gold); font-weight:500; }

/* ===== About Page ===== */
.about-section { position:relative; z-index:1; padding:60px 0; }
.about-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:32px; margin-bottom:24px; }
.about-card h2 { font-size:18px; color:var(--gold); margin-bottom:12px; }
.about-card p, .about-card li { font-size:14px; color:var(--text2); line-height:1.9; }
.about-card ul { padding-left:20px; }
.about-card li { margin-bottom:6px; }
.tag { display:inline-block; background:rgba(160,120,224,0.15); color:var(--accent); font-size:12px; padding:2px 10px; border-radius:4px; margin:2px 4px 2px 0; }

/* ===== Footer ===== */
.site-footer { position:relative; z-index:1; text-align:center; padding:32px 0; border-top:1px solid var(--border); }
.footer-copy { font-size:13px; color:var(--text3); }
.footer-credit { font-size:12px; color:var(--text3); margin-top:4px; }

/* ===== Responsive ===== */
@media (max-width:640px) {
  .hero-title { font-size:32px; }
  .hero-subtitle { font-size:15px; }
  .grid-3 { grid-template-columns:1fr; }
  .latest-chapter-card { flex-direction:column; }
  .chapter-item { flex-direction:column; align-items:flex-start; gap:4px; }
}