/* ============================================================
   theme-v2.css —— 光/暗主题与皮肤
   分区：
     1) 主题变量与身体底色
     2) 卡片/横幅的玻璃质感
     3) 滑动胶囊（tocFlow 彩色流动）
     4) html.mh-light 亮色系（白导航、浅卡片）
     5) 文末「亮色＝浅色照片底」块：背景是 background.webp 上盖一层白纱，
        配清晰/模糊（body.blur-bg .mh-bg-filter 用 backdrop-filter 实现）
     6) 目录页 / 音乐页的亮色补丁（card / songs / player / btn 等）
   备注：要换亮色底图，改第 5 区里 url("../img/xxx")；要调白纱厚薄，改那一行渐变里的 .72/.80/.86。
   ============================================================ */

/* =========================================================
 * 站点统一皮肤 v2（暮光版）
 * 由首页改版派生：在 theme.css / style.css / mobile.css 之后加载
 * 只做「色彩 / 材质 / 字排」统一，不改任何页面布局
 * ========================================================= */

:root,
.theme-clear,
.theme-dim,
.theme-blur,
.theme-dark {
  --v2-ink: #0b0c12;
  --v2-panel: rgba(16, 17, 25, 0.62);
  --v2-panel-hover: rgba(26, 28, 40, 0.74);
  --v2-line: rgba(255, 255, 255, 0.14);
  --v2-line-soft: rgba(255, 255, 255, 0.08);
  --v2-t1: #eceef5;
  --v2-t2: #a9adbd;
  --v2-muted: #7f8496;

  --accent-color: #a0a0ff;
  --primary-text-color: var(--v2-t1);
  --secondary-text-color: var(--v2-t2);
  --card-title-color: #ffffff;
  --footer-text-color: rgba(255, 255, 255, 0.5);
  --motto-color: var(--v2-t1);

  --card-bg-color: var(--v2-panel);
  --card-hover-color: var(--v2-panel-hover);
  --tag-bg-color: rgba(255, 255, 255, 0.07);

  --nav-bg-color: rgba(12, 13, 19, 0.64);
  --nav-border-color: var(--v2-line);
  --nav-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.95);

  --glass-border: 1px solid var(--v2-line);
  --modern-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.9);
  --card-filter: 18px;

  --timeline-line-color: rgba(255, 255, 255, 0.12);
  --timeline-dot-color: #a0a0ff;
  --timeline-active-dot-color: #a0a0ff;
  --avatar-border-color: rgba(255, 255, 255, 0.22);

  --modal-bg-color: rgba(6, 7, 10, 0.72);
  --modal-main-bg: rgba(16, 17, 25, 0.96);
}

/* 亮色主题只统一强调色，保留各自的明暗 */
.theme-white,
.theme-sky,
.theme-fresh {
  --accent-color: #7f7fff;
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===== 全局字排 ===== */
::selection {
  background: rgba(160, 160, 255, 0.35);
  color: #fff;
}

h1 {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 背景压暗层：让照片底和首页同一个调子（只作用于深色主题） */
.theme-clear .mh-bg-filter,
.theme-dim .mh-bg-filter,
.theme-blur .mh-bg-filter,
.theme-dark .mh-bg-filter {
  background: linear-gradient(180deg, rgba(8, 9, 13, 0.28) 0%, rgba(8, 9, 13, 0.58) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== 导航：改成首页同款深色玻璃胶囊 ===== */
.mh-nav {
  background: var(--nav-bg-color);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

@media (min-width: 800px) {
  .nav-container {
    padding: 0 20px;
  }
}

/* 品牌字：去掉彩虹渐变与手写体，回到首页的衬线白字 */
.gradient-text,
.nav-container .gradient-text {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: #fff;
  background: none;
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

.nav-links {
  gap: 18px;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
}

.nav-links a:hover {
  color: #fff;
  transform: none;
  text-shadow: none;
}

.nav-theme-toggle {
  padding: 6px 11px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--v2-line);
  border-radius: 9px;
}

.nav-theme-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  transform: none;
  text-shadow: none;
}

/* ===== 侧栏 ===== */
.mh-avatar {
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 5px rgba(160, 160, 255, 0.09);
  margin-top: 56px;
}

.mh-sidebar-section {
  background: var(--v2-panel);
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* 侧栏内部嵌套卡片 → 拆成一条分割线，避免「卡片套卡片」 */
.mh-sidebar-section .mh-sidebar-section {
  margin-top: 14px;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--v2-line-soft);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mh-bio-item {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}

.mh-bio-item svg,
.mh-bio-item i {
  width: 15px;
  height: 15px;
  fill: rgba(255, 255, 255, 0.55);
  opacity: 0.85;
}

.mh-tags {
  padding: 14px 0 0;
}

.mh-tags-item {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--v2-line);
  border-radius: 8px;
}

.mh-status {
  gap: 0;
}

.mh-status-item {
  padding: 7px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--v2-line-soft);
}

.mh-status-item:last-child {
  border-bottom: 0;
}

.mh-status-title {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--v2-muted);
}

.mh-status-text {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.mh-status-item--uptime .mh-status-text--uptime {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
}

/* ===== 时间线：去掉绿色脉冲，统一成淡紫 ===== */
.mh-timeline-item {
  border-left: 2px solid var(--v2-line);
}

.mh-timeline-dot {
  top: 7px;
  left: -5px;
  width: 7px;
  height: 7px;
  background: var(--timeline-dot-color);
  border: 0;
}

.mh-timeline-list .mh-timeline-item:first-child .mh-timeline-dot {
  animation: none;
  box-shadow: 0 0 0 3px rgba(160, 160, 255, 0.16);
}

.mh-timeline-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
}

.mh-timeline-date {
  font-size: 11.5px;
  color: var(--v2-muted);
}

.mh-timeline-item:hover .mh-timeline-dot {
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 3px rgba(160, 160, 255, 0.22);
}

/* ===== 内容区：标题 / 卡片 / 条块 ===== */
.mh-sections-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 26px 0 16px;
}

.mh-sections-title svg {
  width: 20px;
  height: 20px;
  fill: var(--accent-color);
  opacity: 0.9;
}

.mh-sections-title:hover {
  transform: none;
}

.hero-greeting {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif;
  font-size: 46px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.hero-motto {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

.mh-site-card,
.mh-project-card {
  background: var(--v2-panel);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: 0 16px 34px -30px rgba(0, 0, 0, 0.9);
}

.mh-site-card:hover,
.mh-project-card:hover {
  background: var(--v2-panel-hover);
  border-color: rgba(160, 160, 255, 0.42);
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.95);
}

.mh-site-content p,
.mh-project-content p {
  color: var(--v2-t2);
  letter-spacing: 0.02em;
}

/* ===== Banner 大图：对齐首页 hero 的圆角与压暗 ===== */
.banner-box {
  border: 1px solid var(--v2-line) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.banner-text {
  background: linear-gradient(transparent, rgba(6, 7, 10, 0.82));
}

.banner-text h1 {
  font-size: 30px;
  letter-spacing: 0.06em;
}

.banner-text p {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}

/* ===== 页脚 ===== */
footer {
  background: transparent;
  border-top: 1px solid var(--v2-line-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 18px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.46);
}

/* ===== 弹层 ===== */
.modal-main {
  background: var(--modal-main-bg);
  border: 1px solid var(--v2-line);
  border-radius: 18px;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--v2-line);
}

.modal-hint {
  background: rgba(6, 7, 10, 0.72);
  border: 1px solid var(--v2-line);
}

/* ===== 载入遮罩：沿用深色底 ===== */
.mh-loading {
  background-color: rgba(8, 9, 13, 0.9);
}

.mh-loading-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.82);
}

/* ===== 卡片内的小标签、日期一类的通用克制 ===== */
.mh-inline-loading {
  font-style: normal;
  opacity: 0.4;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(160, 160, 255, 0.7);
  outline-offset: 3px;
}

/* =========================================================
 * 子页入场动画（纯 CSS，页面各自有不同脾气）
 * 用 body[data-page] 区分：about / characters / thoughts /
 * travel / tech / log / e404 / doc / person
 * ========================================================= */
@keyframes v2Nav { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes v2Side { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes v2Up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes v2Zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes v2Grow { from { opacity: 0; transform: scaleX(0.9); transform-origin: left center; } to { opacity: 1; transform: none; transform-origin: left center; } }
@keyframes v2Tilt { from { opacity: 0; transform: perspective(900px) rotateX(9deg) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes v2Pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes v2Dot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes v2Ken {
  from { transform: scale(1.01); }
  to { transform: scale(1.07); }
}
@keyframes v2Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes v2Bar {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.45; }
}

.mh-nav {
  animation: v2Nav 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mh-sidebar {
  animation: v2Side 0.9s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mh-content > * {
  animation: v2Up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mh-content > *:nth-child(1) { animation-delay: 0.20s; }
.mh-content > *:nth-child(2) { animation-delay: 0.28s; }
.mh-content > *:nth-child(3) { animation-delay: 0.36s; }
.mh-content > *:nth-child(4) { animation-delay: 0.44s; }
.mh-content > *:nth-child(5) { animation-delay: 0.52s; }
.mh-content > *:nth-child(6) { animation-delay: 0.60s; }
.mh-content > *:nth-child(7) { animation-delay: 0.66s; }
.mh-content > *:nth-child(n + 8) { animation-delay: 0.72s; }

/* 关于我：一行一行浮现，像在纸上写字 */
body[data-page="about"] .mh-content > * { animation-name: v2Up; }

/* 人物记述：卡片从两侧合拢 */
body[data-page="characters"] .mh-sidebar { animation-name: v2Side; }
body[data-page="characters"] .mh-content > * { animation-name: v2Zoom; }

/* 随笔感悟：目录条从左向右展开 */
body[data-page="thoughts"] .mh-content > * { animation-name: v2Grow; }

/* 游记出行：照片自下而上慢慢推近 */
body[data-page="travel"] .mh-content > * { animation-name: v2Up; }
body[data-page="travel"] .mh-content img {
  animation: v2Zoom 1.1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* 技术折腾：卡片轻微翻起 */
body[data-page="tech"] .mh-content > * { animation-name: v2Tilt; }

/* 日志：时间线一条条点亮 */
body[data-page="log"] .mh-content > * { animation-name: v2Up; }
body[data-page="log"] .mh-timeline-dot { animation: v2Dot 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body[data-page="log"] .mh-timeline-item:nth-child(2) .mh-timeline-dot { animation-delay: 0.12s; }
body[data-page="log"] .mh-timeline-item:nth-child(3) .mh-timeline-dot { animation-delay: 0.2s; }
body[data-page="log"] .mh-timeline-item:nth-child(4) .mh-timeline-dot { animation-delay: 0.28s; }
body[data-page="log"] .mh-timeline-item:nth-child(n + 5) .mh-timeline-dot { animation-delay: 0.36s; }

/* 404：数字弹出来 */
body[data-page="e404"] h1 { animation: v2Pop 0.9s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body[data-page="e404"] .mh-content > * { animation-name: v2Pop; }

/* 人物页：头像轻轻浮着 */
body[data-page="person"] .mh-avatar { animation: v2Float 7s ease-in-out 1.2s infinite; }
body[data-page="person"] .mh-content > * { animation-name: v2Up; }

/* ===== 小心思：悬浮与微动 ===== */
.banner-box img {
  transition: transform 1.2s ease, filter 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .banner-box:hover img {
    transform: scale(1.02);
  }
}

.mh-content img {
  transition: filter 0.35s ease;
}
.mh-content img:hover {
  filter: saturate(1.08) brightness(1.04);
}

.mh-sections-title::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(160, 160, 255, 0.6), transparent);
  animation: v2Bar 5s ease-in-out infinite;
}

.mh-avatar {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.mh-avatar:hover {
  box-shadow: 0 0 0 7px rgba(160, 160, 255, 0.16);
  transform: translateY(-2px);
}

footer::before {
  content: "";
  display: block;
  width: min(1180px, 92%);
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, rgba(160, 160, 255, 0.28), transparent);
}

/* ===== 目录条 / 跳转条：把彩虹胶囊收成一种玻璃质感 ===== */
#placeTocWrap,
#thoughtTocWrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

#placeTocWrap > *,
#thoughtTocWrap > * {
  background-size: 200% 200% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  padding: 7px 12px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.9) !important;
  animation: tocFlow 7s ease-in-out infinite !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

#placeTocWrap > *:hover,
#thoughtTocWrap > *:hover {
  transform: translateY(-2px) scale(1.03) !important;
  filter: brightness(1.08) saturate(1.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

#thoughtTocWrap::-webkit-scrollbar,
#placeTocWrap::-webkit-scrollbar {
  height: 6px;
}

#thoughtTocWrap::-webkit-scrollbar-thumb,
#placeTocWrap::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 255, 0.45) !important;
  border-radius: 99px;
}

.toc-outer {
  background: rgba(16, 17, 25, 0.58) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.toc-title {
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 子页右下角的「下雨」按钮：蓝底改成同款玻璃 */
#rainToggle {
  background: rgba(18, 19, 27, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.06em;
  padding: 9px 14px !important;
}

/* 尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .mh-nav,
  .mh-sidebar,
  .mh-content > *,
  .mh-content img,
  .mh-timeline-dot,
  .mh-avatar,
  .mh-sections-title::after,
  h1 {
    animation: none !important;
  }
}
/* ===== 导航统一（与首页同款浮条） ===== */
.mh-nav {
  background: linear-gradient(180deg, rgba(8, 9, 14, .66), rgba(8, 9, 14, .2)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
}

.mh-nav .gradient-text,
.mh-nav .site-title,
.mh-nav .logo-text {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.mh-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 118px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 11, .84), rgba(6, 7, 11, .3) 58%, transparent);
  z-index: -1;
}

.nav-links a {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .13);
}

.nav-theme-toggle {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ============================================================
   子页与主页统一：同一张照片背景 + 深色压暗，一眼就是同一个站
   ============================================================ */
body,
body.theme-clear,
body.theme-dim,
body.theme-fresh,
body.theme-blur,
body.theme-sky,
body.theme-dark {
  background: linear-gradient(180deg, rgba(5, 9, 14, 0.5) 0%, rgba(5, 9, 14, 0.74) 100%),
              url("../img/background.webp") center center / cover no-repeat fixed !important;
  background-attachment: fixed !important;
  color: #e9ebf5;
}

/* 子页正文区：每块内容各自一张玻璃卡，和主页一样留缝 */
.mh-card,
.toc-outer,
.banner-box {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
}

/* 侧栏标签：只在卡内换行，不许压出卡片边界 */
.mh-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  height: auto !important;
}

.mh-tags-item {
  flex: 0 0 auto;
  max-width: 100%;
  line-height: 24px;
  white-space: nowrap;
}

/* 目录条 / 跳转条：胶囊按文字自己撑开，不再把字挤出边框 */
#placeTocWrap > *,
#thoughtTocWrap > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* ============================================================
   子页卡片：跟主页一样，每块各自一张玻璃卡，卡间留缝
   ============================================================ */
.mh-sidebar-section {
  background: rgba(11, 12, 18, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 14px 13px !important;
  margin-bottom: 12px !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.mh-sidebar-section .mh-sidebar-section {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  padding: 12px 0 0 !important;
  margin-bottom: 0 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tech-card {
  background: rgba(11, 12, 18, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.tech-card:hover {
  border-color: rgba(160, 160, 255, 0.45) !important;
  transform: translateY(-2px);
}

.toc-outer {
  margin-bottom: 16px !important;
}

/* 看板娘：子页缩小一点、贴左边，别压住信息栏 */
#live2d {
  transform: scale(0.62) !important;
  transform-origin: bottom left;
}

/* 站内提示气泡别再盖住侧栏 */
#waifu-tips,
.waifu-tips,
.live2d-tips {
  display: none !important;
}

/* ============================================================
   追加：顶栏不挤 / 亮暗一键切换（与主页光暗同一个开关）/ 标题不压字
   ============================================================ */
.mh-nav .nav-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: nowrap; min-width: 0;
}
.mh-nav .nav-links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 16px; min-width: 0;
}
.mh-nav .nav-theme-toggle {
  flex: 0 0 auto; white-space: nowrap; min-width: max-content;
  margin-left: 8px; line-height: 1.3;
}
@media (max-width: 1240px) {
  .mh-nav .nav-links { gap: 4px 10px; }
  .mh-nav .nav-links a { font-size: 12.5px; }
  .mh-nav .nav-theme-toggle { font-size: 11.5px; padding: 5px 9px; }
}
/* 小标题与下面一行胶囊留足距离，不再压字 */
.mh-sections-title {
  margin: 26px 0 18px; line-height: 1.4; position: relative; z-index: 2;
}

/* ---------- 亮色皮肤（和主页「光」一模一样） ---------- */
html.mh-light body { color: #15161f; }
html.mh-light body .mh-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76)) !important;
  border-bottom: 1px solid rgba(21, 22, 31, 0.08);
  box-shadow: 0 12px 30px -26px rgba(21, 22, 31, 0.55);
}
html.mh-light body .mh-nav .nav-links a { color: rgba(21, 22, 31, 0.64); }
html.mh-light body .mh-nav .nav-links a:hover { color: #15161f; }
html.mh-light body .mh-nav .gradient-text,
html.mh-light body .gradient-text { color: #15161f; }
html.mh-light body .nav-theme-toggle {
  color: #4343a6; background: rgba(124, 124, 242, 0.12);
  border-color: rgba(124, 124, 242, 0.32);
}
html.mh-light body .mh-sidebar-section,
html.mh-light body .tech-card,
html.mh-light body .mh-site-card,
html.mh-light body .mh-project-card {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
  color: #15161f;
  box-shadow: 0 18px 40px -34px rgba(21, 22, 31, 0.55);
}
html.mh-light body .mh-tags-item {
  background: rgba(124, 124, 242, 0.13);
  border-color: rgba(124, 124, 242, 0.28);
  color: #4343a6;
}
html.mh-light body .mh-bio-item,
html.mh-light body .mh-status-item,
html.mh-light body .mh-timeline-text,
html.mh-light body .mh-site-content p,
html.mh-light body .mh-project-content p { color: #2c2f3a; }
html.mh-light body .mh-status-title,
html.mh-light body .mh-sections-title,
html.mh-light body .mh-content h1,
html.mh-light body .mh-content h2,
html.mh-light body .mh-content h3 { color: #15161f; }
html.mh-light body .mh-timeline-date { color: rgba(21, 22, 31, 0.5); }
html.mh-light body .mh-content p,
html.mh-light body .mh-content li { color: #33363f; }
html.mh-light body .toc-outer {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(21, 22, 31, 0.1);
}
html.mh-light body .toc-title { color: #15161f; }
html.mh-light body .mh-avatar {
  box-shadow: 0 0 0 5px rgba(124, 124, 242, 0.14), 0 16px 34px -26px rgba(21, 22, 31, 0.6);
}

/* 亮色细节：页面标题 / 导航文字 / 状态卡 / 日志块 */
html.mh-light body .page-head h1 { color: #15161f !important; }
html.mh-light body .page-head p { color: rgba(21, 22, 31, 0.62) !important; }
html.mh-light body .mh-nav .nav-links a { color: rgba(21, 22, 31, 0.72) !important; }
html.mh-light body .mh-nav .nav-links a:hover { color: #15161f !important; }
html.mh-light body .mh-status-item,
html.mh-light body .mh-status-title { color: #2c2f3a !important; }
html.mh-light body .mh-status-text { color: #43465a !important; }
html.mh-light body .mh-bio-item { color: #2c2f3a !important; }
html.mh-light body .block,
html.mh-light body .card {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
  color: #15161f;
}
html.mh-light body .block h2,
html.mh-light body .block h1,
html.mh-light body .block .time { color: #15161f !important; }
html.mh-light body .block p,
html.mh-light body .block li { color: #33363f !important; }

/* 亮色：内容区整体一张白玻璃卡，页面标题、正文、列表都在卡上 */
html.mh-light body .mh-content {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(21, 22, 31, 0.08);
  border-radius: 18px;
  padding: 22px 24px 26px;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 26px 60px -46px rgba(21, 22, 31, 0.6);
}
html.mh-light body .page-head { margin-top: 4px; }
html.mh-light body .thought-card,
html.mh-light body .post,
html.mh-light body .note,
html.mh-light body .entry {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
  color: #15161f !important;
}
html.mh-light body .thought-card-title,
html.mh-light body .thought-card-date,
html.mh-light body .thought-card-more { color: #15161f !important; }
html.mh-light body .thought-card-excerpt { color: #43465a !important; }
html.mh-light body .thought-card::before { background: rgba(124, 124, 242, 0.85) !important; }
/* 日志页那种没有侧栏的布局也一并白底 */
html.mh-light body .container > h1 { color: #15161f !important; }
html.mh-light body .desc { color: rgba(21, 22, 31, 0.62) !important; }

/* 亮色：导航、模式按钮、快速跳转、标签 */
html.mh-light body .mh-nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(21, 22, 31, 0.08) !important;
  box-shadow: 0 14px 34px -30px rgba(21, 22, 31, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
html.mh-light body #modeToggle,
html.mh-light body .nav-theme-toggle {
  color: #15161f !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(21, 22, 31, 0.16) !important;
}
html.mh-light body #modeToggle svg { stroke: #15161f !important; }
html.mh-light body .toc-outer,
html.mh-light body .quick-jump {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
}
html.mh-light body .toc-title { color: #43465a !important; }
html.mh-light body .tech-tag {
  color: #3b3e52 !important;
  background: rgba(124, 124, 242, 0.12) !important;
  border-color: rgba(124, 124, 242, 0.22) !important;
}
html.mh-light body .tech-card-body h3,
html.mh-light body .tech-card-body p { color: #15161f !important; }
html.mh-light body .tech-card-body p { color: #43465a !important; }

@keyframes tocFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* 亮色态：横幅照片上的大标题/副标题一律保持白字 */
html.mh-light body .banner-text h1,
html.mh-light body .banner-text p{
  color:#fff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5) !important;
}

#thoughtTocWrap,#placeTocWrap{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}

/* 亮色：浅雾底 —— 不留深色照片，和白色主题一套语言 */
html.mh-light body{
  background-color: #f4f8fc !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(249,252,255,.80) 46%, rgba(244,248,253,.86) 100%),
    url("../img/background.webp") !important;
  background-position: center top, center center !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
  box-shadow: none;
}
/* 清晰 / 模糊：模糊时用滤镜层模糊背后的照片，不动内容 */
body.blur-bg .mh-bg-filter{
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
/* 目录页 / 音乐页有独立的照片层，亮色要一起换 */
html.mh-light body .bg-layer{
  background-image: url("../img/background.webp") !important;
  filter: saturate(.5) brightness(1.14) !important;
  transform: none !important;
}
html.mh-light body .bg-scrim{
  background:
    radial-gradient(120% 76% at 80% 0%, rgba(176,186,255,.18), transparent 58%),
    linear-gradient(180deg, rgba(252,253,255,.82), rgba(242,247,254,.91)) !important;
}
html.mh-light body.blur-bg .bg-layer{filter: blur(12px) !important;}
/* 亮色下目录页 / 音乐页的深色卡片 */
html.mh-light body .card,
html.mh-light body .list-col,
html.mh-light body .toc-card,
html.mh-light body .songs,
html.mh-light body .player,
html.mh-light body .film{background: rgba(255,255,255,.82) !important;border-color: rgba(21,22,31,.1) !important;}
html.mh-light body .search{background: rgba(255,255,255,.9) !important;border-color: rgba(21,22,31,.14) !important;color: #15161f !important;}
html.mh-light body .tree .row,
html.mh-light body .cats button{color: rgba(21,22,31,.7) !important;}
html.mh-light body .tree .row:hover,
html.mh-light body .cats button:hover{color: #15161f !important;background: rgba(124,124,242,.12) !important;}
html.mh-light body .song{color: rgba(21,22,31,.7) !important;border-bottom-color: rgba(21,22,31,.1) !important;}
html.mh-light body .song:hover,
html.mh-light body .song.on{color: #15161f !important;background: rgba(124,124,242,.14) !important;}
html.mh-light body .song .dot{border-color: rgba(21,22,31,.24) !important;}
html.mh-light body .row a{color: rgba(21,22,31,.78) !important;}
html.mh-light body .btn{background: rgba(255,255,255,.82) !important;border-color: rgba(21,22,31,.14) !important;color: rgba(21,22,31,.72) !important;}
html.mh-light body .btn:hover{color: #15161f !important;background: #fff !important;}
html.mh-light body .btn.play{background: #7c7cf2 !important;color: #fff !important;border: 0 !important;}
html.mh-light body .cover::after{background: linear-gradient(180deg, transparent, rgba(255,255,255,.42)) !important;}
html.mh-light body .bar{background: rgba(21,22,31,.14) !important;}
html.mh-light body .film .cap{color: #15161f !important;}
/* 亮色下的光/暗按钮 */
html.mh-light body .nv-mode{color: #15161f !important;background: rgba(255,255,255,.9) !important;border-color: rgba(21,22,31,.16) !important;}
html.mh-light body .mh-content{
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
}
html.mh-light body .toc-outer{
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(21, 22, 31, 0.1) !important;
}

/* 载入遮罩兜底：0.7s 后自动淡出（防止某些页面卡在白屏） */
.mh-loading{
  animation:mhLoadOut .55s ease .7s both;
}
@keyframes mhLoadOut{
  to{opacity:0;visibility:hidden;pointer-events:none;}
}

/* 亮色：载入遮罩也换成浅色 */
html.mh-light .mh-loading{background-color: rgba(247, 250, 253, 0.96);}
html.mh-light .mh-loading-text{color: rgba(21, 22, 31, 0.72);}

/* 亮色：那层深色压暗换成极淡的白纱，否则浅底被压成灰 */
html.mh-light body .mh-bg-filter{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(246, 249, 253, 0.52) 100%) !important;
}

/* ------------------------------------------------------------
   亮色补充 2：目录页 / 音乐页这两页用的是 CSS 变量配色，
   直接重设变量比逐个类去改更干净
   ------------------------------------------------------------ */
html.mh-light body{
  --ink:#eaf0f8;
  --text:#15161f;
  --muted:rgba(21,22,31,.52);
  --t2:rgba(21,22,31,.70);
  --line:rgba(21,22,31,.12);
  --line-2:rgba(21,22,31,.20);
}
html.mh-light body .tree .leaf{color:rgba(21,22,31,.62) !important;}
html.mh-light body .tree .leaf:hover{color:#15161f !important;background:rgba(124,124,242,.14) !important;}
html.mh-light body .tree .row .n,
html.mh-light body .row .date,
html.mh-light body .year span{color:rgba(21,22,31,.48) !important;}
html.mh-light body .row .cat{
  color:rgba(21,22,31,.66) !important;background:rgba(21,22,31,.06) !important;
  border-color:rgba(21,22,31,.14) !important;
}
html.mh-light body .cats b{color:#6f6ff0 !important;}
html.mh-light body .card-title,
html.mh-light body .toc-card h2{color:#15161f !important;}
html.mh-light body .toc-card li a{color:rgba(21,22,31,.72) !important;}
html.mh-light body .toc-card li a em{color:rgba(21,22,31,.44) !important;}
html.mh-light body .page-sub{color:rgba(21,22,31,.58) !important;}
html.mh-light body .empty{color:rgba(21,22,31,.5) !important;}
html.mh-light body .search::placeholder{color:rgba(21,22,31,.42) !important;}
html.mh-light body .card.note p{color:rgba(21,22,31,.62) !important;}
/* 音乐页 */
html.mh-light body .head p{color:rgba(21,22,31,.62) !important;text-shadow:none !important;}
html.mh-light body .now .sb,
html.mh-light body .sec span,
html.mh-light body .foot{color:rgba(21,22,31,.5) !important;}
html.mh-light body .song .no,
html.mh-light body .film .cap em{color:rgba(21,22,31,.48) !important;}
html.mh-light body .btn.play{background:#6f6ff0 !important;color:#fff !important;}
html.mh-light body .bar i{background:linear-gradient(90deg,#7c7cf2,#a9a9ff) !important;}
/* 亮色底：白纱再透一点点，照片能看出来，又不脏 */
html.mh-light body{
  background-image:
    radial-gradient(120% 80% at 78% 2%, rgba(176,186,255,.18), transparent 58%),
    linear-gradient(180deg, rgba(250,252,255,.84) 0%, rgba(245,249,255,.89) 46%, rgba(238,245,253,.93) 100%),
    url("../img/background.webp") !important;
}

/* 亮色补充 3：技术折腾页的按钮与标签 */
html.mh-light body .demo-link{
  background: rgba(124,124,242,.16) !important;
  border-color: rgba(124,124,242,.34) !important;
  color: #4545b8 !important;
}
html.mh-light body .mh-tags-item{
  background: rgba(124,124,242,.14) !important;
  color: #4545b8 !important;
}
html.mh-light body .mh-status-title{color: rgba(21,22,31,.52) !important;}
html.mh-light body .mh-status-text{color: #15161f !important;}
html.mh-light body .tech-tag{
  background: rgba(21,22,31,.06) !important;
  color: rgba(21,22,31,.72) !important;
  border-color: rgba(21,22,31,.14) !important;
}
html.mh-light body .tech-card{background: rgba(255,255,255,.9) !important;}
html.mh-light body .tech-card-body{color: #15161f !important;}
html.mh-light body .mh-timeline-text{color: rgba(21,22,31,.7) !important;}
html.mh-light body .mh-timeline-date{color: rgba(21,22,31,.5) !important;}
html.mh-light body .toc-outer{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(21,22,31,.1) !important;
}
html.mh-light body .toc-title{color: #15161f !important;}

/* 亮色补充 4：两端口径兜底（html 或 body 挂 mh-light 都能读到） */
html.mh-light .demo-link,body.mh-light .demo-link{
  background:rgba(124,124,242,.16) !important;
  border-color:rgba(124,124,242,.34) !important;
  color:#3a3a9e !important;
}
html.mh-light .tech-tag,body.mh-light .tech-tag{
  background:rgba(21,22,31,.06) !important;
  color:rgba(21,22,31,.72) !important;
  border-color:rgba(21,22,31,.14) !important;
  text-shadow:none !important;
}
html.mh-light .tech-card-body h3,body.mh-light .tech-card-body h3{color:#15161f !important;}
html.mh-light .tech-card-body p,body.mh-light .tech-card-body p{
  color:#43465a !important;text-shadow:none !important;
}
html.mh-light .mh-content,body.mh-light .mh-content{
  color:#24263a !important;text-shadow:none !important;
}
html.mh-light .banner-text,body.mh-light .banner-text{
  color:#15161f !important;text-shadow:none !important;
}
html.mh-light .banner-text p,body.mh-light .banner-text p{
  color:rgba(21,22,31,.66) !important;
}