/* ============================================================
   星空主题 v5 · 彻底重写版
   核心逻辑：
   1. #home * 通配符先干掉所有默认背景/模糊/阴影
   2. #home 前缀强制所有文字浅色（优先级压过博客园模板）
   3. 再用更高优先级重新给卡片加实色背景
   ============================================================ */

:root {
  --bg-deep: #04050d;
  --card: #0e1330;
  --card-border: rgba(138, 180, 255, 0.22);
  --txt: #cdd8ee;
  --txt-dim: #9aa8c8;
  --txt-strong: #eef4ff;
  --link: #8fdcff;
  --accent: #b28dff;
  --accent-2: #5b8cff;
}

/* ---------- 1. 基础 ---------- */
html { background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(91, 140, 255, 0.30), transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(178, 141, 255, 0.20), transparent 65%),
    radial-gradient(ellipse 60% 50% at 8% 78%, rgba(0, 190, 220, 0.14), transparent 65%),
    linear-gradient(180deg, #04050d 0%, #070b1c 40%, #0a0f24 70%, #05060f 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---------- 2. 星空与装饰层 ---------- */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.space-decor {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- 3. 内容层（唯一抬高的层） ---------- */
#home {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ---------- 4. 核弹级重置：干掉博客园所有默认背景 ---------- */
#home,
#home *,
#header,
#header *,
#navigator,
#navigator *,
#main,
#main *,
#mainContent,
#mainContent *,
#sideBar,
#sideBar *,
#footer,
#footer *,
.forFlow,
.forFlow * {
  background-color: transparent;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- 5. 文字颜色：用 #home 前缀强制浅色 ---------- */
#home,
#home * {
  color: var(--txt);
}

#home a {
  color: var(--link);
  text-decoration: none;
}
#home a:hover { color: #ffffff; }

#home h1,
#home h2,
#home h3,
#home h4 {
  color: var(--txt-strong);
}

#home .postTitle,
#home .postTitle a,
#home .postTitle a:visited {
  color: var(--txt-strong);
}
#home .postTitle a:hover {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(138, 180, 255, 0.9),
               0 0 34px rgba(138, 180, 255, 0.5);
}

#home .dayTitle,
#home .dayTitle a { color: var(--txt-dim); }
#home .postDesc,
#home .postDesc a { color: var(--txt-dim); }
#home .postCon,
#home .c_b_p_desc { color: #b4c1de; }

/* ---------- 6. 内容卡片：实色背景，无模糊 ---------- */
#home #mainContent .day,
#home #mainContent .post {
  background-color: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 26px 30px 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

#home #mainContent .day:hover,
#home #mainContent .post:hover {
  border-color: rgba(138, 180, 255, 0.5);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45),
              0 0 24px rgba(91, 140, 255, 0.18);
}

/* 侧边栏卡片 */
#home #sideBar > div {
  background-color: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

#home #sideBar h3,
#home #sideBar .catListTitle {
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--txt-strong) !important;
  border-bottom: 1px solid rgba(138, 180, 255, 0.18);
}

#home #sideBar h3::before,
#home #sideBar .catListTitle::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fd7ff, #b28dff);
  box-shadow: 0 0 10px rgba(127, 215, 255, 0.9);
}

#home #sideBar ul { margin: 0; padding: 0; list-style: none; }
#home #sideBar li a {
  display: block;
  padding: 6px 10px;
  font-size: 13.5px;
  border-radius: 8px;
  transition: all .25s;
}
#home #sideBar li a:hover {
  padding-left: 16px;
  color: #ffffff !important;
  background-color: rgba(138, 180, 255, 0.16) !important;
}

/* 评论区卡片 */
#home #comment_form,
#home #blog-comments-placeholder {
  background-color: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 20px;
}

/* ---------- 7. 输入框恢复可见 ---------- */
#home input[type="text"],
#home input[type="password"],
#home textarea {
  background-color: rgba(4, 7, 20, 0.85) !important;
  background-image: none !important;
  border: 1px solid rgba(138, 180, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--txt) !important;
  outline: none;
}
#home input[type="text"]:focus,
#home textarea:focus {
  border-color: rgba(138, 180, 255, 0.8);
  box-shadow: 0 0 14px rgba(91, 140, 255, 0.45);
}
#home input[type="button"],
#home input[type="submit"],
#home button {
  background: linear-gradient(135deg, rgba(91,140,255,.5), rgba(178,141,255,.5)) !important;
  border: 1px solid rgba(138, 180, 255, 0.55) !important;
  border-radius: 999px;
  padding: 8px 24px;
  color: #eef4ff !important;
  cursor: pointer;
}
#home input[type="button"]:hover,
#home input[type="submit"]:hover,
#home button:hover {
  box-shadow: 0 0 20px rgba(138, 180, 255, 0.6);
}

/* ---------- 8. 导航按钮 ---------- */
#home #navList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#home #navList li { margin: 0; }
#home #navList li a {
  display: inline-block;
  padding: 6px 18px;
  font-size: 14px;
  color: #ffffff !important;
  background-color: rgba(11, 16, 38, 0.85) !important;
  background-image: none !important;
  border: 1px solid rgba(138, 180, 255, 0.3);
  border-radius: 999px;
  transition: all .3s ease;
}
#home #navList li a:hover {
  background-color: rgba(91, 140, 255, 0.4) !important;
  border-color: rgba(138, 180, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(138, 180, 255, 0.5);
}

/* ---------- 9. 头部 ---------- */
#home #header {
  padding: 60px 0 26px;
  margin-bottom: 28px;
  text-align: center;
  border-bottom: 1px solid rgba(138, 180, 255, 0.14);
}

#home #Header1_HeaderTitle,
#home #blogTitle .headermaintitle,
#home #blogTitle h1 a,
#home #blogTitle h1 {
  display: inline-block;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--txt-strong) !important;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(138, 180, 255, 0.7),
               0 0 30px rgba(138, 180, 255, 0.4),
               0 0 60px rgba(178, 141, 255, 0.3);
}

#home #blogTitle h2 {
  display: block;
  margin: 12px 0 0;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--txt-dim) !important;
}

/* ---------- 10. 布局 ---------- */
#home #main {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}
#home #mainContent { flex: 1 1 auto; min-width: 0; }
#home #sideBar {
  flex: 0 0 290px;
  width: 290px;
  position: sticky;
  top: 24px;
}

/* ---------- 11. 文章正文内元素 ---------- */
#home #cnblogs_post_body { font-size: 15.5px; line-height: 1.95; }
#home #cnblogs_post_body p { margin: 0 0 1.1em; }
#home #cnblogs_post_body h1,
#home #cnblogs_post_body h2,
#home #cnblogs_post_body h3,
#home #cnblogs_post_body h4 {
  margin: 1.6em 0 .8em;
  padding-left: 12px;
  font-weight: 700;
  border-left: 3px solid var(--accent-2);
}
#home #cnblogs_post_body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
#home #cnblogs_post_body blockquote {
  margin: 1.2em 0;
  padding: 14px 20px;
  background-color: rgba(138, 180, 255, 0.08) !important;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
#home #cnblogs_post_body code {
  padding: 2px 7px;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: .9em;
  color: #a8e6ff !important;
  background-color: rgba(138, 180, 255, 0.14) !important;
  border-radius: 5px;
}
#home #cnblogs_post_body pre {
  padding: 16px 18px;
  overflow-x: auto;
  background-color: rgba(3, 6, 18, 0.9) !important;
  border: 1px solid rgba(138, 180, 255, 0.2);
  border-radius: 12px;
}
#home #cnblogs_post_body pre code {
  padding: 0;
  color: #d0dcf2 !important;
  background-color: transparent !important;
}
#home #cnblogs_post_body table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
}
#home #cnblogs_post_body th,
#home #cnblogs_post_body td {
  padding: 10px 14px;
  border: 1px solid rgba(138, 180, 255, 0.2);
}
#home #cnblogs_post_body th {
  background-color: rgba(138, 180, 255, 0.12) !important;
}

/* 标签 */
#home #EntryTag a,
#home .postTags a {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 3px 12px;
  font-size: 12px;
  color: #a8ccff !important;
  background-color: rgba(138, 180, 255, 0.1) !important;
  border: 1px solid rgba(138, 180, 255, 0.3);
  border-radius: 999px;
}
#home #EntryTag a:hover,
#home .postTags a:hover {
  color: #ffffff !important;
  background-color: rgba(138, 180, 255, 0.24) !important;
}

/* 分页 */
#home #pager a,
#home .pager a,
#home #pager span {
  display: inline-block;
  min-width: 34px;
  margin: 0 4px;
  padding: 5px 11px;
  color: #b0c4ea !important;
  background-color: rgba(11, 16, 38, 0.85) !important;
  border: 1px solid rgba(138, 180, 255, 0.22);
  border-radius: 9px;
}
#home #pager a:hover,
#home .pager a:hover {
  color: #ffffff !important;
  background-color: rgba(91, 140, 255, 0.28) !important;
}

/* ---------- 12. 侧边栏公告 ---------- */
#home .star-notice { text-align: center; }
#home .star-notice-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-strong) !important;
  text-shadow: 0 0 14px rgba(138, 180, 255, 0.8),
               0 0 34px rgba(178, 141, 255, 0.5);
}
#home .star-notice p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.9;
  color: #a8b8dd !important;
}
#home .star-notice-deco {
  margin-top: 12px;
  font-size: 18px;
  letter-spacing: 6px;
}
#home .star-notice-deco span {
  display: inline-block;
  animation: floatY 3s ease-in-out infinite;
}
#home .star-notice-deco span:nth-child(2) { animation-delay: .4s; }
#home .star-notice-deco span:nth-child(3) { animation-delay: .8s; }
#home .star-notice-deco span:nth-child(4) { animation-delay: 1.2s; }
#home .star-notice-deco span:nth-child(5) { animation-delay: 1.6s; }

/* ---------- 13. 页脚 ---------- */
#home #footer {
  margin-top: 36px;
  padding: 24px 0 36px;
  text-align: center;
  font-size: 12.5px;
  color: var(--txt-dim) !important;
  border-top: 1px solid rgba(138, 180, 255, 0.14);
}

/* ---------- 14. 装饰样式 ---------- */
.decor { position: absolute; pointer-events: none; user-select: none; }

.planet {
  border-radius: 50%;
  opacity: 0.9;
  filter: drop-shadow(0 0 24px rgba(91, 140, 255, 0.5));
}
.planet-1 {
  top: 6%; right: 3%;
  width: 92px; height: 92px;
  background: radial-gradient(circle at 32% 30%, #c4a4ff, #7a4fe0 52%, #2a1a6e 100%);
  box-shadow: inset -10px -10px 24px rgba(0, 0, 0, 0.45), 0 0 40px rgba(178, 141, 255, 0.6);
  animation: floatY 12s ease-in-out infinite alternate;
}
.planet-1 .ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 185%; height: 42%;
  transform: translate(-50%, -50%) rotate(-20deg);
  border-radius: 50%;
  border: 2px solid rgba(200, 170, 255, 0.55);
  box-shadow: 0 0 22px rgba(178, 141, 255, 0.55);
}
.planet-2 {
  bottom: 14%; left: 2.5%;
  width: 62px; height: 62px;
  background: radial-gradient(circle at 35% 30%, #a8e8ff, #3a6bd8 58%, #152a5e);
  box-shadow: inset -7px -7px 18px rgba(0, 0, 0, 0.5), 0 0 30px rgba(127, 215, 255, 0.55);
  animation: floatY 16s ease-in-out infinite alternate-reverse;
}
.planet-3 {
  top: 58%; right: 5%;
  width: 44px; height: 44px;
  background: radial-gradient(circle at 32% 30%, #ffc4ec, #c86ac8 58%, #5a1a5e);
  box-shadow: inset -5px -5px 14px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 150, 220, 0.5);
  animation: floatY 14s ease-in-out infinite alternate;
}
.moon {
  top: 40%; left: 6%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8efff, #9aa8c8 65%, #4a5570);
  box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.5), 0 0 16px rgba(200, 220, 255, 0.7);
  animation: floatY 9s ease-in-out infinite alternate;
}
.rocket {
  width: 44px; height: 74px;
  filter: drop-shadow(0 0 14px rgba(127, 215, 255, 0.85));
}
.rocket svg { width: 100%; height: 100%; display: block; }
.rocket-1 { top: 26%; left: 0; animation: rocketFly1 24s linear infinite; }
.rocket-2 { top: 70%; left: 0; width: 32px; height: 54px; animation: rocketFly2 32s linear infinite 10s; }

@keyframes rocketFly1 {
  0%   { transform: translate(-90px, 60px) rotate(38deg); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(calc(100vw + 90px), -90px) rotate(38deg); opacity: 0; }
}
@keyframes rocketFly2 {
  0%   { transform: translate(-80px, 40px) rotate(42deg); opacity: 0; }
  10%  { opacity: .95; }
  90%  { opacity: .95; }
  100% { transform: translate(calc(100vw + 80px), -120px) rotate(42deg); opacity: 0; }
}
.astronaut {
  top: 14%; left: 4%;
  width: 72px; height: 108px;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(138, 180, 255, 0.75));
  animation: astronautFloat 22s ease-in-out infinite;
}
.astronaut svg { width: 100%; height: 100%; display: block; }

@keyframes astronautFloat {
  0%   { transform: translate(0, 0) rotate(-8deg); }
  25%  { transform: translate(50px, -35px) rotate(5deg); }
  50%  { transform: translate(110px, 15px) rotate(-5deg); }
  75%  { transform: translate(40px, 50px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}
.sparkle {
  width: 16px; height: 16px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 8px rgba(200, 230, 255, 1));
  animation: twinkle 2.8s ease-in-out infinite;
}
.sparkle-1 { top: 12%; left: 22%; animation-delay: 0s; }
.sparkle-2 { top: 32%; right: 18%; animation-delay: .5s; }
.sparkle-3 { top: 65%; left: 12%; animation-delay: 1s; }
.sparkle-4 { top: 78%; right: 26%; animation-delay: 1.5s; }
.sparkle-5 { top: 48%; left: 48%; animation-delay: .8s; width: 12px; height: 12px; }
.sparkle-6 { top: 88%; left: 38%; animation-delay: 2s; width: 10px; height: 10px; }

@keyframes floatY {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}
@keyframes twinkle {
  0%, 100% { opacity: .2; transform: scale(.65); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

/* ---------- 15. 滚动条 & 选区 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(6, 9, 22, 0.6); }
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(91,140,255,.6), rgba(178,141,255,.6));
}
::selection { background: rgba(91, 140, 255, 0.4); color: #fff; }

/* ---------- 16. 加载动画 ---------- */
#star-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04050d;
  pointer-events: none;
  animation: starLoadingOut 1.1s ease 0.5s forwards;
}
#star-loading i {
  width: 48px; height: 48px;
  border: 2px solid rgba(138, 180, 255, 0.18);
  border-top-color: #7fd7ff;
  border-right-color: #b28dff;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(91, 140, 255, 0.7);
  animation: starSpin .9s linear infinite;
}
@keyframes starSpin { to { transform: rotate(360deg); } }
@keyframes starLoadingOut { to { opacity: 0; visibility: hidden; } }

/* ---------- 17. 响应式 ---------- */
@media (max-width: 900px) {
  #home #main { flex-direction: column; }
  #home #sideBar { position: static; flex: 1 1 auto; width: 100%; }
  #home { padding: 0 16px 40px; }
  #home #header { padding: 40px 0 20px; }
  #home #Header1_HeaderTitle,
  #home #blogTitle h1 a,
  #home #blogTitle h1 { font-size: 1.7rem; letter-spacing: 1.5px; }
  #home #mainContent .day,
  #home #mainContent .post { padding: 20px 18px 16px; }
  .planet-1 { width: 62px; height: 62px; }
  .planet-2 { width: 42px; height: 42px; }
  .planet-3 { width: 32px; height: 32px; }
  .astronaut { width: 52px; height: 78px; }
  .rocket { width: 30px; height: 50px; }
}