/* 首页最近文章介绍和时间字号缩小 */
.article-desc {
  font-size: 0.98em;
  color: #444;
  margin-bottom: 0.2em;
}
.article-meta {
  font-size: 0.92em;
  color: #888;
  margin-top: 0.1em;
}

/* 首页底部双栏区块 */
.home-bottom-sections {
  display: flex;
  gap: 32px;
  margin: 48px 0 0 0;
  justify-content: space-between;
}
.home-bottom-sections section {
  flex: 1;
    background: transparent;
            box-shadow:
              0 0 0 4px rgba(74, 74, 74, 0.18),
              0 0 24px 8px rgba(74, 74, 74, 0.10),
              0 8px 32px 0 rgba(74, 74, 74, 0.10),
              0 2px 24px 0 rgba(74, 74, 74, 0.08);
    position: relative;
    overflow: visible;
    /* 绿色模糊外阴影 */
    /* 可根据需要调整rgba数值和模糊半径 */
  border-radius: 8px;
  padding: 32px 28px 28px 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  transition: background 0.3s;
    backdrop-filter: blur(4px);
}
.dark .home-bottom-sections section {
  background: transparent;
    box-shadow:
      0 0 0 4px rgba(40, 40, 40, 0.28),
      0 0 24px 8px rgba(40, 40, 40, 0.16),
      0 8px 32px 0 rgba(40, 40, 40, 0.12),
      0 2px 24px 0 rgba(40, 40, 40, 0.10);
  backdrop-filter: none;
}
.home-bottom-sections h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 4px;
  color: #fff;
  margin-top: 0;
  position: absolute;
  top: 10px;
  left: 28px;
  letter-spacing: 0.01em;
}
.guide-content, .tbd-content {
  font-size: 0.84em;
  color: #f5f7f5;
  margin-top: 12px;
  border-top: 1.5px solid rgba(64,64,64,0.65);
  padding-top: 2px;
  width: 100%;
  letter-spacing: 0.01em;
}
.dark .guide-content, .dark .tbd-content {
  color: #fff;
  border-top: 1.5px solid rgba(140,140,140,0.55);
}
@media (max-width: 900px) {
  .home-bottom-sections {
    flex-direction: column;
    gap: 18px;
  }
  .home-bottom-sections section {
    min-height: 120px;
    padding: 20px 12px 16px 12px;
  }
  /* 移动端标题、分割线和正文整体上移 */
  .home-bottom-sections h2 {
    margin-top: -18px;
    margin-bottom: 4px;
    position: static;
  }
  .guide-content, .tbd-content {
     margin-top: 2px;
  }
}
/* 专用于 article.html 的留言板内容区高度 */
#article-guestbook-list {
  min-height: 132px !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  padding-right: 6px;
  font-size: 13px;
}
/* Guestbook统一样式 */
.guestbook-box {
  margin: 32px auto 0 auto;
  max-width: 98vw;
  background: var(--card-bg, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 16px 12px 14px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  font-size: 14px;
  color: var(--text, #222);
  transition: background 0.3s;
}
.dark .guestbook-box {
  background: var(--card-bg-dark, #23272e);
  color: var(--text-dark, #e0e0e0);
}
.guestbook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.guestbook-title-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.guestbook-title {
  font-size: 14px;
  font-weight: bold;
}
.guestbook-toggle {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--muted, #888);
  cursor: pointer;
}
.guestbook-admin-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.guestbook-login, .guestbook-admin {
  font-size: 14px;
  padding: 6px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted, #888);
  cursor: pointer;
}
.guestbook-admin {
  border: 1px solid rgba(34,85,34,0.12);
  color: rgba(34,85,34,0.9);
}
.guestbook-list {
  min-height: 44px;
  max-height: 220px;
  overflow: auto;
  padding-right: 6px;
  font-size: 13px;
}
.guestbook-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
}
.guestbook-pager {
  font-size: 13px;
  color: var(--muted, #888);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 0 0 2px 0;
  }

  .guestbook-pager button {
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid #d9e2ec;
    background: #f6f8fa;
    color: #4a5560;
    cursor: pointer;
    margin: 0 2px;
    transition: background 0.18s;
  }
@media (max-width: 600px) {
  .guestbook-box {
    max-width: 99vw;
    padding: 10px 2vw 12px 2vw;
  }
  .guestbook-pager button {
    font-size: 18px;
    padding: 6px 16px;
  }
}
.guestbook-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}
.guestbook-name, .guestbook-content {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  color: inherit;
}
.dark .guestbook-name, .dark .guestbook-content {
  border: 1px solid #444;
  background: #23272e;
  color: #e0e0e0;
}
.guestbook-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(50,120,70,0.10);
  border: 1px solid rgba(50,120,70,0.18);
  color: rgba(30,90,40,0.95);
  cursor: pointer;
  transition: background 0.2s;
}
.guestbook-send:hover {
  background: rgba(50,120,70,0.22);
}
/* --- 强制夜间模式首页 hero 和最近文章卡片深色 --- */
body.dark-mode .hero {
  background: rgba(138, 169, 155, 0.18) !important; /* 更浅更偏绿 */
  border: 1.5px solid #4d6f61 !important; /* 深绿色边框 */
  color: #e2e8e6 !important;
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.22), 0 0 6px 1px rgba(167,243,208,0.06) inset !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  outline: 2px solid rgba(167,243,208,0.18);
  outline-offset: 2.5px;
}
body.dark-mode .hero h1,
body.dark-mode .hero .lede {
  color: #e2e8e6 !important;
}
body.dark-mode .card,
body.dark-mode .article-card.book-box,
body.dark-mode .category-block.book-box {
  background: rgba(26,36,33,0.82) !important;
  border: 1px solid #3a4447 !important;
  color: #e2e8e6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13) !important;
  backdrop-filter: blur(8px) !important;
}
body.dark-mode .card h3,
body.dark-mode .card p,
body.dark-mode .article-card.book-box h3,
body.dark-mode .article-card.book-box p,
body.dark-mode .category-block.book-box .cat-title,
body.dark-mode .category-block.book-box .post-list li {
  color: #e2e8e6 !important;
}
body.dark-mode .category-block.book-box .post-list li.active {
  color: #fff !important;
  background: rgba(77,111,97,0.22) !important;
  font-weight: 700;
}
body.dark-mode .category-block.book-box .post-list li:hover {
  color: #fff !important;
  background: rgba(77,111,97,0.13) !important;
}
.md-body .mermaid {
  width: 100%;
}
:root {
  --ui-font: "Noto Sans SC", "Microsoft YaHei", "SimSun", "Heiti SC", sans-serif;
  /* Chinese body font for non-markdown pages: prefer Source Han Serif / 思源宋体 */
  --body-cn: 'Source Han Serif SC', '思源宋体', 'Noto Serif SC', 'SimSun', 'STSong', serif;
  /* Chinese font for markdown/ipynb body text (non-headings): prefer 方正楷体/FZKai fallbacks */
  --md-cn: 'KaiTi', '楷体', serif;
  --body-en: "Times New Roman", "Georgia", serif;
  --mono: "Fira Code", "SFMono-Regular", Consolas, Menlo, monospace;
  --ink: #1f2d3d;
  --muted: #4a5560;
  --line: #d9e2ec;
  --card: rgba(255, 255, 255, 0.82);
  --panel: rgba(255, 255, 255, 0.74);
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  --accent: #4d6f61; /* 低饱和度绿色 */
  --accent-2: #8aa99b; /* 更浅的低饱和绿 */
}

/* 移动端去除点击蓝色高亮 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ui-font);
  color: var(--ink);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: radial-gradient(circle at 20% 20%, rgba(140, 198, 255, 0.15), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(108, 164, 255, 0.12), transparent 30%),
    #eef2f7;
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 更轻的透明遮罩，保证视频背景可见且不抢占内容 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  z-index: -1;
}

.page-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 64px; /* increased bottom padding to ensure consistent gap to footer */
  position: relative;
  font-family: var(--body-cn), var(--body-en); /* non-markdown pages: Chinese = 思源宋体, English = Times New Roman */
  /* z-index removed to allow fixed children (like mobile sidebar) to break out of stacking context */
}

.navbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 14px;
  z-index: 10;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar .brand {
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--accent);
}

.navbar nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.navbar a {
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255,255,255,0.7); /* neutral subtle background */
  border: 1px solid rgba(200,210,215,0.6);
  font-size: 14px;
  transition: all 0.18s ease;
  font-weight: 600; /* 更醒目的字体 */
}

.navbar a:hover,
.navbar a.active {
  /* soft green highlight to match site accent */
  background: linear-gradient(180deg, rgba(138,169,155,0.18), rgba(77,111,97,0.12));
  border-color: rgba(77,111,97,0.35);
  color: #08330b; /* 深绿色文字 */
  box-shadow: 0 4px 12px rgba(60,110,80,0.06);
}

/* small last-updated text in the navbar (right side) */
.navbar .last-updated {
  /* margin-left: auto; removed, handled by theme btn */
  padding-right: 8px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.95;
}

.hero {
  margin: 28px 0 22px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* On desktop, swap background styles between the hero (nickname area) and INBOX */
@media (min-width: 769px) {
  /* Make the hero background lighter / more transparent (guestbook-like) */
  .hero {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
  }

  /* Give the guestbook a card-style background previously used by .hero */
  #guestbook {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-top: -8px; /* move up slightly on desktop */
  }
}

.hero .eyebrow {
  color: var(--muted);
  letter-spacing: 2px;
  font-size: 12px;
  margin-bottom: 8px;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.25;
  font-family: var(--body-en), var(--body-cn);
}

.hero .lede {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
}

.pill {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  transition: all 0.2s ease;
}

.pill:hover {
  transform: translateY(-2px);
  border-color: rgba(108, 164, 255, 0.4);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
  text-decoration: none;
  color: var(--ink);
}

.card:hover {
  transform: translateY(-3px);
}

/* Increase opacity for "最近文章" cards on homepage for better contrast */
#latest-posts .card {
  background: rgba(255, 255, 255, 0.92); /* slightly more opaque than var(--panel) */
}

/* Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-to-top:hover {
  background: var(--accent-2);
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
#back-to-top svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

/* TOC Toggle Button (Mobile) - UPDATED: Left side handle */
#toc-toggle {
  display: none;
  position: fixed;
  top: 50%;
  left: 0; 
  transform: translateY(-50%);
  width: 32px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 12px 12px 0; /* Rounded tab on right side */
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  z-index: 900;
  transition: all 0.2s ease;
}

#toc-toggle:hover, #toc-toggle:active {
  background: var(--accent);
  color: #fff;
  width: 36px;
}

@media (max-width: 768px) {
  /* Default: Hide Desktop Navbar on Mobile */
  .navbar {
    display: none !important;
  }

  /* Mobile Menu Active State (Triggered by Hamburger) */
  .navbar.active {
    display: flex !important; /* Override hide */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.98); /* Solid white background */
    backdrop-filter: blur(12px);
    z-index: 1500; /* Below Close Button (ensure button > 1500) */
    padding: 80px 24px 40px;
    align-items: stretch;
    gap: 20px;
    /* Reset Desktop Styles */
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    /* Prevent Scroll Hiding from affecting open menu */
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    animation: fadeIn 0.25s ease-out;
  }

  /* Mobile Menu Links Container */
  .navbar.active nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  /* Mobile Menu Links (Pill Style) - Rendered as Texture Cards */
  .navbar.active a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 12px;
    /* Base State: White Card, No Border (Not "Full Frame") */
    background: #ffffff;
    border: none; /* Removed border stroke */
    color: var(--ink);
    /* Soft shadow for physical texture */
    box-shadow: 0 6px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden; /* For potential shine effects */
  }

  /* Active & Hover State - "Selected Texture" */
  .navbar.active a:hover,
  .navbar.active a.active {
    /* Image 2 Color Match: Foggy Greenish Grey */
    background: #e6eeea; 
    color: #1a3c2e; /* Deep Green Text */
    /* "Half Frame" feel? Active state often implies a slight depression or highlight */
    box-shadow: 0 4px 12px rgba(77,111,97,0.15), inset 0 0 0 1px rgba(77,111,97,0.05);
    transform: translateY(-1px);
  }

  /* Add a subtle "light up" effect on hover */
  .navbar.active a::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.4s;
  }
  .navbar.active a:hover::after {
    transform: translateX(100%);
  }

  /* Hide Desktop Specifics in Mobile Menu */
  .navbar.active .brand,
  .navbar.active .desktop-theme-btn {
    display: none !important;
  }

  /* Show Last Updated at bottom */
  .navbar.active .last-updated {
    margin-top: auto;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    opacity: 0.8;
  }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  
  #toc-toggle {
    display: flex;
  }
  
  .reader-layout {
    display: block !important; 
    margin-top: 0;
  }
  
  /* Mobile Sidebar (Drawer) - Consolidated Styles */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 80% !important;
    z-index: 2000 !important;
    /* Frosted glass effect for sidebar */
    background-color: rgba(255, 255, 255, 0.95); /* High opacity for legibility */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    border-radius: 0;
    margin: 0;
    border: none;
    overflow-y: auto; /* Ensure scrolling */
    padding: 24px 16px; /* Adjust padding */
    max-height: none; /* Override desktop max-height */
    visibility: visible;
  }
  
  /* Reset generic sidebar styles that might conflict */
  .sidebar h3 {
    margin-top: 0;
    font-size: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    color: var(--accent);
  }

  .sidebar.active {
    transform: translateX(0) !important;
  }

  /* Hide the toggle when sidebar is active */
  .sidebar.active ~ #toc-toggle {
    opacity: 0; 
    pointer-events: none;
  }

  /* Overlay */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
  }
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .reader-panel {
    border: none;
    background: rgba(255, 255, 255, 0.85); /* Slightly more opaque on mobile for readability */
    padding: 20px 16px;
    border-radius: 0; /* Full width edge to edge usually looks better or keeping rounded is fine */
  }
}

/* Mobile mailbox button and mobile INBOX styles */
#mobile-mailbox {
  position: fixed;
  top: 10px;          /* Same height as nav toggle */
  left: 18px;         /* Symmetrical left position */
  bottom: auto;       
  width: 44px;        /* Same size as nav toggle */
  height: 44px;
  background: rgba(255, 255, 255, 0.9); /* Same style */
  color: var(--muted); /* Match muted color of nav toggle */
  border-radius: 50%;
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 2100;      /* Same z-index */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  border: none;       /* Remove border to match nav toggle */
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s;
}
#mobile-mailbox:active { transform: scale(0.92); background: #ffffff; }
#mobile-mailbox svg { width:22px; height:22px; } /* Slightly larger icon */

@media (max-width: 768px) {
  #mobile-mailbox { display: flex; }
  /* transform the INBOX into a fixed panel that drops down from top */
  #guestbook {
    position: fixed !important;
    top: 66px !important;           /* Just below the separator line */
    left: 50% !important;           
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: auto !important;        

    width: 90vw !important;         /* Increased width */
    max-width: 360px !important;    /* Increased max-width */
    
    height: auto !important;        
    max-height: 45vh !important;    /* Reduced max height "上下也适当减小" */
    
    padding: 12px 14px !important;   
    border-radius: 12px;
    display: none;
    z-index: 2200;                  /* Higher than buttons when open */
    overflow: hidden;               
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 11px !important;
  }
  #guestbook.active { 
    display: block !important; 
    animation: slideDown 0.25s ease-out;
  }
  @keyframes slideDown { from{opacity:0; transform:translate(-50%, -10px);} to{opacity:1; transform:translate(-50%, 0);} }

  /* Limit list height and allow scroll */
  #guestbook #guestbook-list {
    max-height: 120px !important; /* ~3 items height */
    overflow-y: auto !important;
    margin-bottom: 8px !important;
    padding-right: 4px; /* space for scrollbar */
  }

  /* Fix footer layout in guestbook for mobile: Wrap pager and inputs */
  #guestbook > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  #guestbook-pager {
    text-align: center;
    width: 100%;
    margin-bottom: 4px;
    font-size: 10px !important;
  }

  /* Adjust input row to fill width */
  #guestbook > div:last-child > div:last-child {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 6px !important;
  }
  
  /* Use flex-grow for content input, fixed width for others */
  #guest-name-input { width: 44px !important; flex-shrink: 0; }
  #guest-content-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  #guestbook-new-btn { width: 34px !important; flex-shrink: 0; }
  
  /* Compact Inputs */
  #guestbook input { font-size:12px !important; padding:6px 8px !important; }
  #guestbook button { font-size:12px !important; padding:4px 10px !important; }
}

/* Make focus and selected states in INBOX more visible */
#guestbook input,
#guestbook textarea {
  border: 1px solid rgba(0,0,0,0.12);
}

#guestbook input:focus,
#guestbook textarea:focus {
  border-color: rgba(77,111,97,0.85); /* darker border on focus */
  box-shadow: 0 0 0 3px rgba(77,111,97,0.16); /* smaller, slightly stronger ring */
  outline: none;
}

#guestbook input:focus::placeholder,
#guestbook textarea:focus::placeholder {
  color: #4b5563;
}

/* Checkbox / public toggle — make checked state visible */
#guestbook input[type="checkbox"]:checked {
  accent-color: var(--accent);
}

/* Pager buttons — light by default, highlight on focus/hover */
#guestbook #guestbook-pager button,
#guestbook #guestbook-pager .pager-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(0,0,0,0.9); /* darker, near-black border */
  padding: 4px 8px;
  border-radius: 6px;
}
#guestbook #guestbook-pager button:focus,
#guestbook #guestbook-pager .pager-btn:focus,
#guestbook #guestbook-pager button:hover,
#guestbook #guestbook-pager .pager-btn:hover {
  background: rgba(77,111,97,0.06);
  color: rgba(77,111,97,0.98);
}

/* Make send button stand out when focused */
#guestbook #guestbook-new-btn:focus {
  box-shadow: 0 0 0 6px rgba(77,111,97,0.08);
  outline: none;
}

/* Darken borders for key guestbook controls (name/content inputs and send button) */
#guest-name-input,
#guest-content-input {
  border: 1px solid rgba(0,0,0,0.9) !important;
  box-shadow: none !important;
}

#guestbook-new-btn {
  border: 1px solid rgba(0,0,0,0.9) !important;
}

/* Scroll Hide Animation Class */
.nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px) !important;
}
/* Ensure icons transition property includes opacity and transform */
#mobile-nav-toggle, #mobile-nav-close, #mobile-mailbox {
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s !important;
}
/* Ensure the line also fades */
body::after {
  transition: opacity 0.3s ease;
}
body.nav-hidden-state::after {
  opacity: 0;
}
  #guestbook.active { display: block; }

.card p,
.article-card p,
.hero .lede {
  font-family: var(--body-cn);
}

/* 书本式卡片（左侧有书脊，角更直，阴影表示厚度） */
.article-card.book-box,
.category-block.book-box {
  position: relative;
  border-radius: 8px; /* 不那么圆润 */
  padding: 18px 20px 18px 28px; /* 恢复为原始左侧书脊空间 */
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.94));
  border: 1px solid rgba(200,210,215,0.6);
  box-shadow: 0 8px 22px rgba(30,40,50,0.06);
}

/* 书脊：更细、更中性，用阴影而不是鲜绿色表现厚度 */
.article-card.book-box::before,
.category-block.book-box::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 6px; /* 恢复为较细的书脊 */
  background: linear-gradient(90deg, rgba(10,20,30,0.06), rgba(0,0,0,0.02));
  border-radius: 2px; /* 书脊轻微圆角 */
  /* 用外部阴影表现厚度，避免单一醒目颜色 */
  box-shadow: 4px 0 12px rgba(10,15,20,0.06);
}

/* 书脊边缘高光，增强立体感但保持低调 */
.article-card.book-box::after,
.category-block.book-box::after {
  content: "";

  position: absolute;
  left: 18px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(255,255,255,0.45);
  opacity: 0.6;
  border-radius: 1px;
}

.article-card.book-box h3 {
  margin-left: 22px; /* 恢复与较细书脊对齐 */
  font-size: 18px;
  letter-spacing: 0.4px;
}

.article-card.book-box p {
  margin: 6px 0;
  padding-left: 22px; /* 恢复与标题对齐 */
  color: var(--muted);
  font-size: 14px;
}

.article-card.book-box p a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
}

.article-card.book-box p a:hover {
  color: var(--ink);
}

/* 书目式侧边目录（用于 article.html 的 category-block） */
.category-block.book-box {
  position: relative;
  margin-bottom: 18px;
  padding: 14px 16px 14px 28px; /* 恢复为原始左侧书脊预留 */
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.96));
  border: 1px solid rgba(200,210,215,0.6);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20,30,40,0.05);
}

.category-block.book-box::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 5px; /* 恢复为较细的书脊 */
  background: linear-gradient(90deg, rgba(10,15,20,0.05), rgba(0,0,0,0.02));
  border-radius: 2px;
  box-shadow: 3px 0 10px rgba(8,10,12,0.05);
}

.category-block.book-box .cat-title {
  margin-left: 18px;
  font-weight: 700;
  color: var(--ink);
}

.category-block.book-box .post-list {
  list-style: none;
  margin: 8px 0 0 18px;
  padding: 0;
}

.category-block.book-box .post-list li {
  margin: 6px 0;
  padding-left: 6px;
  cursor: pointer;
  color: var(--muted);
}

.category-block.book-box .post-list li.active {
  color: var(--ink);
  font-weight: 600;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.section-title {
  margin: 26px 0 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85); /* 柔和的灰白，避免过亮 */
  font-weight: 700;
  letter-spacing: 1px;
  text-align: left; /* 左对齐 */
  font-family: "Heiti SC", "SimHei", var(--ui-font), var(--body-en); /* 黑体优先，英文为 Times New Roman */
  text-shadow: none;
}

.simple-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.simple-crumb {
  color: #3a4756;
  font-weight: normal;
  font-family: var(--ui-font);
  letter-spacing: 1px;
}

/* 页脚版权居中 + 白色 + 英文字体 Times New Roman */
footer.section-title {
  text-align: center;
  color: #ffffff;
  font-family: var(--body-en);
}

.reader-layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* 缩窄目录栏 */
  gap: 18px;
  margin-top: 18px;
}

.sidebar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  /* 让侧栏随页面滚动并随正文延展，避免内部出现滚动条 */
  max-height: none;
  overflow: visible;
  align-self: start;
}

.sidebar h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--accent);
}

.category-block {
  margin-bottom: 10px;
}

.category-block .cat-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  transition: all 0.2s ease;
}

.post-list li:hover {
  background: rgba(30, 40, 50, 0.04); /* 低饱和灰色高亮 */
  color: var(--ink);
}

.post-list li.active {
  background: rgba(30, 40, 50, 0.06); /* 稍深的灰色作为选中高亮 */
  color: var(--ink);
  font-weight: 700;
}

.reader-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  max-width: 860px; /* 限制正文窗口最大宽度，提升可读性 */
  width: 100%; /* 强制占满可用空间，避免因内容多少导致宽度不一 */
  /* justify-self: start; 已移除，让其默认拉伸或居中 */
}

.article-meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.md-body {
  /* Markdown / ipynb body text uses a kaiti-style Chinese font for Chinese content,
     with English fallback preserved. Headings keep the existing serif rule. */
  font-family: var(--md-cn), var(--body-en);
  line-height: 1.9;
  color: var(--ink);
  font-size: 16px;
  -webkit-user-select: none;
  user-select: none; /* 禁止非代码区域复制 */
  word-break: break-word; /* 长词在边界换行，避免溢出 */
  overflow-wrap: anywhere; /* 任意位置断行以防止超出容器 */
}
.md-body .katex,
.md-body .katex-display {
  overflow-wrap: anywhere; /* 公式内部过长时断行 */
  color: inherit; /* 继承父文本颜色，支持 <span style="color:..."> 包裹公式 */
}
.md-body .katex-display {
  overflow-x: auto; /* 仍允许横向滚动以保证复杂公式完整性 */
}

.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4,
.md-body h5,
.md-body h6 {
  font-family: var(--body-en), var(--body-cn);
  margin: 18px 0 10px;
  line-height: 1.35;
}

.md-body p {
  margin: 10px 0;
}

.md-body a {
  color: #2f6feb;
  text-decoration: none;
}

.md-body a:hover {
  text-decoration: underline;
}

.md-body blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(108, 164, 255, 0.12);
  border-left: 4px solid rgba(108, 164, 255, 0.6);
  color: var(--muted);
  border-radius: 8px;
}

.md-body code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 5px;
  border-radius: 4px;
}

.md-body pre {
  background: #eafaf7;
  color: #1f2d3d;
  padding: 10px 12px; /* 更紧凑的内边距 */
  border-radius: 8px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11.5px; /* 更小的字号 */
  line-height: 1.45; /* 更紧凑的行高 */
  position: relative; /* 用于定位复制按钮 */
  margin: 1em 0;
  max-height: 500px; /* 代码块最大高度，比结果框稍大 */
}

.ipynb-result pre {
  background: rgba(234, 250, 247, 0.4); /* 更浅的背景，增加透明度 */
  border-left: 3px solid rgba(0,0,0,0.1); /* 添加左侧边框区分输出 */
  color: #4a5560; /* 输出文字颜色 slightly muted */
  max-height: 350px; /* 限制最大高度 */
  overflow-y: auto; /* 超出部分显示垂直滚动条 */
}

/* Dark Mode adaptation for output */
body.dark-mode .ipynb-result pre {
  background: rgba(30, 45, 40, 0.4); /* Dark mode lighter background */
  color: #a0b0b0;
}

/* Only apply ipynb-like styling to plain fenced code blocks (``` without a language) */
.md-body pre.fenced-plain {
  background: rgba(234, 250, 247, 0.4);
  border-left: 3px solid rgba(0,0,0,0.08);
  color: #4a5560;
  max-height: 350px;
  overflow-y: auto;
}

/* Dark mode for plain fenced blocks */
body.dark-mode .md-body pre.fenced-plain {
  background: rgba(30, 45, 40, 0.4);
  color: #a0b0b0;
  border-left: 3px solid rgba(255,255,255,0.04);
}

.md-body pre code {
  background: none;
  padding: 0;
}

/* 允许在代码区域选择/复制 */
.md-body pre,
.md-body code,
.md-body .copy-btn {
  -webkit-user-select: text;
  user-select: text;
}

/* Mermaid 图的容器应当去掉代码样式，以便正常渲染 SVG */
.md-body pre.mermaid {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  position: static;
}

/* 代码块复制按钮样式 */
.md-body .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}
.md-body .copy-btn:hover {
  background: rgba(255, 255, 255, 1);
}

/* Dark mode for copy button inside markdown/ipynb content */
body.dark-mode .md-body .copy-btn {
  background: rgba(30, 30, 30, 0.6);
  color: #e6e6e6;
  border: 1px solid rgba(255,255,255,0.06);
}
body.dark-mode .md-body .copy-btn:hover {
  background: rgba(30, 30, 30, 0.85);
}

.md-body ul,
.md-body ol {
  padding-left: 22px;
  margin: 10px 0;
}

.md-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
}
.md-body .katex-display {
  margin: 12px 0;
}

.md-body th,
.md-body td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.md-body th {
  background: rgba(108, 164, 255, 0.12);
}

.ghost-btn {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
}

.ghost-btn:hover {
  border-color: rgba(108, 164, 255, 0.5);
  background: rgba(108, 164, 255, 0.1);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 缩窄卡片最小宽度 */
  gap: 12px; /* 略减间距 */
}

.article-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px; /* 减少内边距，降低留白感 */
  box-shadow: var(--shadow);
}

.article-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.article-card h3 a {
  text-decoration: none;
  color: var(--ink);
}

.article-card p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 14px;
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(108, 164, 255, 0.15);
  color: #2f6feb;
}

/* About Bird Icon (Homepage) */
.about-bird, 
.about-bird:visited,
.about-bird:active {
  color: #7a9c8c; /* Sage Green */
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-size: 26px; /* Adjust size for emoji */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 4px;
}

/* Hover Effect: Float up */
.about-bird:hover {
  transform: translateY(-2px) scale(1.1);
  background: transparent;
  color: #688a7b; /* Slightly darker on hover */
  cursor: pointer;
}

body.dark-mode .about-bird,
body.dark-mode .about-bird:visited {
  color: #a2c7b5; /* Lighter green in dark mode */
}
body.dark-mode .about-bird:hover {
  color: #e2e8e6;
}

#mobile-nav-toggle, #mobile-nav-close {
  display: none; /* Make sure it's hidden by default on desktop */
}

/* Theme Toggle Button (Mobile Floating) */
#theme-toggle {
  display: none; /* default hidden on desktop */
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  z-index: 2100;
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.6); /* Increased Transparency */
  color: var(--muted);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
  padding: 0;
}
#theme-toggle:active { transform: translateX(-50%) scale(0.92); background-color: rgba(255,255,255,0.8); }

/* Desktop Theme Toggle inside Navbar */
.desktop-theme-btn .hidden { display: none; }
/* Generic hidden utility used by theme icons and other elements */
.hidden { display: none !important; }

/* Make contact-row elements use the same font (Email button and GitHub link) */
.contact-row a,
#copy-email-btn {
  font-family: var(--body-en); /* English names use Times New Roman */
  font-size: 14px; /* match GitHub link sizing */
  line-height: 1.2;
}
@media (max-width: 768px) {
  #desktop-theme-toggle { display: none !important; }
}

/* Dark Mode Variables */
body.dark-mode {
  /* 夜间模式下首页 hero 区域和最近文章卡片深色美化 */
  --ink: #e2e8e6; /* 稍微带点青色的白 */
  --muted: #94a39f; /* 灰绿色的弱化文字 */
  --line: #2f3d3a; /* 深墨绿色线条 */
  --card: rgba(26, 36, 33, 0.7); /* 墨绿灰色，透明度提高 (0.85 -> 0.7) */
  --panel: rgba(26, 36, 33, 0.65); /* 更透一点 */
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  background: #111816; /* 深墨绿背景 */
}
/* Ensure background video is dimmed or hidden in dark mode if desired, or let overlay handle it */
body.dark-mode::before {
  /* 蒙版透明度提高 (0.85/0.9 -> 0.7/0.75)，让背景视频隐约透出墨绿感 */
  background: linear-gradient(135deg, rgba(17, 24, 22, 0.7), rgba(10, 15, 13, 0.75));
}
body.dark-mode .navbar, 
body.dark-mode #guestbook,
body.dark-mode #mobile-nav-toggle,
body.dark-mode #mobile-mailbox,
body.dark-mode #theme-toggle {
  background: rgba(26, 36, 33, 0.7) !important; /* 统一墨绿灰色高透明 */
  color: #e2e8e6;
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px); /* 增加模糊以保证高透明下的可读性 */
}
body.dark-mode #mobile-nav-close {
  background: rgba(26, 36, 33, 0.85);
  color: #fff;
}
body.dark-mode .article-card.book-box {
  background: linear-gradient(180deg, rgba(26,36,33,0.8), rgba(20,28,25,0.8));
  border-color: var(--line);
}
body.dark-mode .navbar a {
  background: rgba(26, 36, 33, 0.5); /* 按钮也更透 */
  color: var(--ink);
  border-color: var(--line);
}
body.dark-mode .navbar a.active {
  background: rgba(77, 111, 97, 0.4);
  color: #a7f3d0;
}

@media (max-width: 768px) {
  #theme-toggle {
    display: flex; /* Show only on mobile as requested */
  }

  /* Ensure nav toggle/close buttons are consistent and visible on mobile */
  #mobile-nav-toggle, #mobile-nav-close {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 10px; /* Aligned with functionality */
      right: 18px;
      z-index: 2200; /* High z-index to sit above mobile menu (1500) */
      border: none;
      cursor: pointer;
      width: 44px; /* Fixed larger touch target */
      height: 44px;
      color: var(--muted);
      background-color: rgba(255, 255, 255, 0.9); /* Pure white, slight transparency */
      border-radius: 50%; /* Circle shape */
      box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Consistent shadow */
      transition: all 0.2s ease;
      padding: 0;
      backdrop-filter: blur(4px);
  }

  #mobile-nav-close {
    display: none; /* Default hidden */
    background-color: #ffffff;
    color: var(--accent); /* Accent color for close state */
  }

  #mobile-nav-toggle:active, #mobile-nav-close:active {
    transform: scale(0.92);
    background-color: #ffffff;
  }

  /* White separator line between icons and content */
  body::after {
    content: "";
    position: fixed;
    top: 64px; /* Below the 44px icons + 10px top + margin */
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(255,255,255,0.7);
    z-index: 1000;
    display: block;
    pointer-events: none;
  }

  .page-shell {
    padding: 20px 15px 32px;
    margin-top: 50px; /* Push content down */
  }

  .hero h1 {
    font-size: 28px;
  }
  
  .reader-panel {
    padding: 15px;
    width: 100%;
  }
}

/* Guestbook Checkbox Custom Color */
#guest-public-checkbox {
  accent-color: var(--accent);
  cursor: pointer;
}


/* Guestbook Checkbox Custom Color */
#guest-public-checkbox {
  accent-color: var(--accent);
}

/* Make the checkbox show a darker border/box for visibility */
#guest-public-checkbox {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.6);
  border-radius: 3px;
}

/* Unified footer styling (used by all pages) */
.site-footer {
  width: 100%;
  position: relative;
  padding: 12px 0;
  margin-top: 0; /* rely on .page-shell padding-bottom for consistent spacing */
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 12px; /* smaller */
  color: #ffffff !important; /* always white text */
  background: transparent; /* no white background */
  box-sizing: border-box;
}
.album img, .gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #f6f8fa;
  object-fit: contain;
}
.site-footer::before {
  /* full-viewport-width horizontal divider so every page shows the same separator */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid #dfe7e3;
}
.site-footer .footer-main { vertical-align: middle; font-weight: 500; color: inherit; }
.site-footer .footer-divider { margin: 0 8px; color: inherit; }
.site-footer .footer-thanks { font-style: italic; vertical-align: middle; color: inherit; }
.site-footer .footer-thanks a { color: #57b07f; text-decoration: none; font-style: italic; }

@media (prefers-color-scheme: light) {
  /* keep footer text white as requested; links still slightly lighter green */
  .site-footer { color: #ffffff !important; }
  .site-footer .footer-thanks a { color: #57b07f; }
}