/* ========== 基础与背景 ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: #e6f7ff;
  background: radial-gradient(1200px 600px at 20% 10%, #0b1a2a 0%, #060d17 60%, #04080f 100%);
  overflow-x: hidden;
}

.bg-img {
  position: fixed;
  inset: 0;
  background-image: url('../3cfc7b0ed72621da02c462731af6ed3c.jpg');
  background-size: cover;
  background-position: center;
  opacity: .22; /* 透明度稍微高一点（更透明） */
  filter: saturate(110%) contrast(105%);
  pointer-events: none;
  z-index: 0;
}

.stars::before, .stars::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,.4) 50%, transparent 51%);
  background-repeat: repeat;
  animation: drift 120s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.stars::after { opacity: .4; filter: blur(1px); animation-duration: 160s; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-1000px); } }

.container { width: min(1100px, 92vw); margin: 0 auto; padding: 24px 0 64px; }

/* ========== 头部 ========== */
.hero { text-align: center; padding: 56px 16px 8px; position: relative; z-index: 2; }
.topbar { display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.subtitle { font-size: 12px; color: #8aa7c2; opacity: .9; margin-top: 6px; letter-spacing: .02em; position: relative; z-index: 2; }
.hero h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: .02em;
  color: #7cf9ff;
  text-shadow: 0 0 6px rgba(124,249,255,.7), 0 0 20px rgba(0,255,204,.35), 0 0 36px rgba(0,204,255,.2);
}
.hero p { margin: 0; color: #92b6d1; }

/* ========== 网格与卡片 ========== */
.grid { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; position: relative; z-index: 2; }
.card {
  border: 1px solid rgba(0, 255, 200, .2);
  background: linear-gradient(180deg, rgba(16,32,48,.55), rgba(8,16,28,.55));
  backdrop-filter: blur(4px);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,255,200,.06) inset, 0 8px 30px rgba(0, 150, 255, .08);
}
.card h2 { margin: 0 0 0; font-size: 18px; color: #e6f7ff; font-weight: 600; }
.card .card-link { display: block; text-decoration: none; color: inherit; }
.card .card-link:hover h2 { color: #7cf9ff; text-shadow: 0 0 8px rgba(0,255,200,.3); }
.btn {
  text-decoration: none;
  color: #a9d8ff;
  border: 1px solid rgba(120,180,255,.4);
  padding: 8px 12px;
  border-radius: 8px;
  transition: all .2s ease;
}
.btn:hover { border-color: rgba(0,255,200,.7); color: #7cf9ff; box-shadow: 0 0 12px rgba(0,255,200,.2) inset, 0 0 16px rgba(0,255,200,.2); }
.btn.primary { background: linear-gradient(90deg, rgba(0,255,200,.18), rgba(0,180,255,.18)); color: #eaffff; border-color: rgba(0,255,220,.45); }

/* 语言切换 */
.lang-toggle { display:flex; gap:8px; }
.lang-toggle button {
  background: transparent;
  color: #a9d8ff;
  border: 1px solid rgba(120,180,255,.4);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.lang-toggle button.active { background: rgba(0,255,220,.18); color: #eaffff; border-color: rgba(0,255,220,.45); }

/* ========== 提示块 ========== */
.tip { margin-top: 36px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); position: relative; z-index: 2; }
.tip h3 { margin: 0 0 10px; font-size: 16px; color: #bfe8ff; }
.tip ol { margin: 0; padding-left: 20px; color: #9ec4e0; }
.tip code { color: #c6f2ff; }

/* ========== 页脚 ========== */
.footer { text-align: center; color: #6c8aa5; padding: 20px; border-top: 1px solid rgba(255,255,255,.06); position: relative; z-index: 2; }

/* ========== 文章页 ========== */
.article {
  width: min(900px, 92vw);
  margin: 0 auto;
  background: rgba(10,18,30,.55);
  border: 1px solid rgba(0,255,220,.15);
  border-radius: 14px;
  padding: 18px 18px 36px;
  box-shadow: 0 10px 40px rgba(0,150,255,.08);
  position: relative;
  z-index: 2;
}
.article .back { display: inline-block; margin-bottom: 8px; }
.article h1 { margin: 6px 0 16px; font-size: clamp(22px, 4vw, 32px); color: #7cf9ff; text-shadow: 0 0 8px rgba(0,255,220,.3); }
.article .meta { color: #8fb2cc; margin-bottom: 16px; }
.docx-content p { line-height: 1.9; color: #deebf7; margin: 0 0 12px; }
.docx-content p + p { text-indent: 2em; }