:root {
  --bg: #0a0e1a;
  --bg-card: rgba(15, 23, 42, 0.85);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --border: rgba(56, 189, 248, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 修仙洞府背景 — 星空 + 远山 + 云雾 + 灵气 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* 星空层 */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(88, 28, 135, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 0.3) 0%, transparent 70%),
    #0a0e1a;
}

/* 远山剪影 SVG 背景 */
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60vh;
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='m1' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%230c1427;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%230a0e1a;stop-opacity:1'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23111d3a;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%230c1427;stop-opacity:1'/%3E%3C/linearGradient%3E%3ClinearGradient id='m3' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%231a2a4a;stop-opacity:0.9'/%3E%3Cstop offset='100%25' style='stop-color:%23111d3a;stop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 600 L0 350 Q120 280 240 320 Q360 360 480 300 Q600 240 720 280 Q840 320 960 260 Q1080 200 1200 250 Q1320 300 1440 240 L1440 600 Z' fill='url(%23m1)'/%3E%3Cpath d='M0 600 L0 400 Q150 340 300 380 Q450 420 600 350 Q750 280 900 330 Q1050 380 1200 320 Q1350 260 1440 300 L1440 600 Z' fill='url(%23m2)'/%3E%3Cpath d='M0 600 L0 450 Q180 400 360 430 Q540 460 720 410 Q900 360 1080 400 Q1260 440 1440 390 L1440 600 Z' fill='url(%23m3)'/%3E%3Cpath d='M680 420 Q700 350 720 340 Q740 350 760 420 Q750 430 720 430 Q690 430 680 420' fill='%23111d3a' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  opacity: 0.9;
}

/* 灵气粒子层 */
.aura-particles {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.aura-particles::before,
.aura-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow:
    8vw 15vh 0 0 rgba(56,189,248,0.9),
    8vw 15vh 0 6px rgba(56,189,248,0.3),
    22vw 55vh 0 0 rgba(167,139,250,0.8),
    22vw 55vh 0 8px rgba(167,139,250,0.3),
    45vw 25vh 0 0 rgba(56,189,248,0.85),
    45vw 25vh 0 5px rgba(56,189,248,0.3),
    65vw 65vh 0 0 rgba(167,139,250,0.75),
    65vw 65vh 0 7px rgba(167,139,250,0.3),
    78vw 35vh 0 0 rgba(56,189,248,0.9),
    78vw 35vh 0 6px rgba(56,189,248,0.3),
    15vw 75vh 0 0 rgba(167,139,250,0.8),
    15vw 75vh 0 8px rgba(167,139,250,0.3),
    55vw 10vh 0 0 rgba(56,189,248,0.85),
    55vw 10vh 0 5px rgba(56,189,248,0.3),
    88vw 80vh 0 0 rgba(167,139,250,0.8),
    88vw 80vh 0 7px rgba(167,139,250,0.3),
    35vw 45vh 0 0 rgba(56,189,248,0.9),
    35vw 45vh 0 6px rgba(56,189,248,0.3),
    12vw 85vh 0 0 rgba(167,139,250,0.7),
    12vw 85vh 0 8px rgba(167,139,250,0.3),
    92vw 15vh 0 0 rgba(56,189,248,0.85),
    92vw 15vh 0 5px rgba(56,189,248,0.3),
    50vw 90vh 0 0 rgba(167,139,250,0.75),
    50vw 90vh 0 7px rgba(167,139,250,0.3);
  animation: float-particles 12s ease-in-out infinite;
}

.aura-particles::after {
  animation-delay: -6s;
  animation-duration: 15s;
  transform: scale(0.8);
}

@keyframes float-particles {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 1; }
  25% { transform: translateY(-30px) translateX(15px); opacity: 0.8; }
  50% { transform: translateY(-50px) translateX(-10px); opacity: 1; }
  75% { transform: translateY(-20px) translateX(20px); opacity: 0.7; }
}

/* 云雾层 */
.mist-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(56,189,248,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 90%, rgba(167,139,250,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 90%, rgba(56,189,248,0.06) 0%, transparent 50%);
  animation: mist-drift 20s ease-in-out infinite;
}

@keyframes mist-drift {
  0%, 100% { opacity: 0.6; transform: translateX(0); }
  50% { opacity: 0.9; transform: translateX(20px); }
}

/* 顶部导航 */
header {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 1.5rem;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--accent);
}

main { flex: 1; }

/* ====== Landing Page ====== */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
}

/* 洞府图标 SVG */
.landing-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.landing-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(56,189,248,0.3));
}

.landing-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(56,189,248,0.2);
}

.landing-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 3rem;
  font-style: italic;
}

/* 入口卡片 */
.landing-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 420px;
  margin-bottom: 2rem;
}

.landing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.landing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.15), 0 0 60px rgba(56, 189, 248, 0.05);
}

.card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.btn-secondary {
  display: inline-block;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.btn-secondary:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.landing-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

.landing-powered {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.5;
}

@media (max-width: 480px) {
  .landing-title { font-size: 1.6rem; }
  .landing-cards { max-width: 100%; }
  .landing-card { padding: 1.5rem; }
}

/* ====== Content Pages ====== */
.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: left;
}

.container h1, .container h2 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.container h2 {
  font-size: 1.5rem;
  color: var(--accent);
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  backdrop-filter: blur(8px);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.1);
}

.post-card h2, .post-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.post-card a {
  color: var(--accent);
  text-decoration: none;
}

.post-card a:hover {
  color: var(--accent-hover);
}

.post-card time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.post-card p {
  color: var(--text-muted);
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Article */
.article {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.article article {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  backdrop-filter: blur(10px);
}

.article h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.article .meta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.tags {
  color: var(--accent);
}

.content h2, .content h3 {
  margin: 2rem 0 1rem;
  color: var(--accent);
}

.content p {
  margin-bottom: 1rem;
}

.content ul, .content ol {
  margin: 1rem 0 1rem 1.5rem;
}

.content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--text-muted);
  font-style: italic;
}

footer {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 14, 26, 0.8);
  backdrop-filter: blur(8px);
}