/* ==================== 全局主題過渡效果 ==================== */

/* 統一的主題切換過渡時間 - 設為0實現即時切換 */
:root {
  --theme-transition-duration: 0s;
  --theme-transition-timing: ease-out;
}

/* 尊重用戶的減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0s;
  }
  
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}

/* 可選：保留過渡模式（用戶可以通過添加此類別來啟用） */
.with-transitions {
  --theme-transition-duration: 0.2s !important;
}

/* 可選：更慢的過渡模式（用戶可以通過添加此類別來啟用） */
.slow-transitions {
  --theme-transition-duration: 0.3s !important;
}

/* 全局主題過渡 - 確保所有元素都有一致的過渡效果 */
*,
*::before,
*::after {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing),
    background var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 強制統一所有主要容器的過渡效果 */
.email-subscription,
.email-subscription *,
.footer-contact-info,
.footer-contact-info *,
.contact-link,
.contact-link *,
.email-input-group,
.email-input-group *,
.about-subscription,
.about-subscription * {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing),
    background var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 全局覆蓋：禁用所有較長的過渡時間，提升性能 */
* {
  transition-duration: 0s !important;
}

/* 僅保留很短的互動反饋效果 */
*:hover,
*:focus,
*:active {
  transition-duration: 0.05s !important;
}

/* 例外：保留技能條的動畫效果 */
.skill-progress {
  transition-duration: 2s !important;
}



/* 保留互動效果的極短過渡（hover、focus等） */
.interactive-transition {
  transition: transform 0.1s ease, opacity 0.1s ease !important;
}

/* 特殊動畫保持原有時間（如技能條） */
.skill-progress {
  transition: width 2s ease-in-out !important;
}

/* 確保頁面主體元素也有統一的過渡 */
html, body {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 單頁應用容器的統一過渡 */
.homepage-container,
.all-posts-container,
.single-post {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* ==================== 固定狀態欄樣式 ==================== */
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  border-bottom: 2px solid var(--primary-color);
  z-index: 1000;
  padding: 0;
  box-shadow: var(--shadow-md);
}

.fixed-navbar .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  min-height: 44px;
}

.fixed-navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 36px;
}

/* 主題切換按鈕 */
.theme-toggle {
  background: none;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.1s ease !important;
  padding: 0;
  color: var(--text-primary);
}

.theme-toggle:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
  transform: scale(1.1);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(180deg);
}

.fixed-navbar .logo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.fixed-navbar .logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.fixed-navbar .logo-link:hover {
  color: var(--primary-color);
}

.fixed-navbar .nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
  transform: translateY(-6px);
}

.fixed-navbar .nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fixed-navbar .logo-link:hover .nav-avatar {
  transform: translateY(-6px) scale(1.1);
}

.fixed-navbar .logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 36px;
  transform: translateY(-8px);
}

.fixed-navbar .nav-avatar-fallback {
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.fixed-navbar .nav-avatar-fallback svg {
  width: 24px;
  height: 24px;
  color: var(--text-inverse);
}

.fixed-navbar ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.fixed-navbar li {
  margin: 0 10px;
  display: flex;
  align-items: center;
  height: 36px;
}

.fixed-navbar a {
  color: var(--text-primary);
  text-decoration: none !important;
  padding: 8px 14px;
  border-radius: 4px;
  transition: 
    color var(--theme-transition-duration) var(--theme-transition-timing),
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  transform: translateY(8px);
  border-bottom: none !important;
}

.fixed-navbar a:hover {
  color: var(--primary-color);
  transform: translateY(4px);
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 活動狀態樣式 */
.fixed-navbar a.active {
  color: var(--primary-color);
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 深色模式下導航文字強制為白色 */
:root[data-theme="dark"] .fixed-navbar a {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar a:hover {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar a.active {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar .logo-text {
  color: #ffffff !important;
}

/* 確保主要內容不被固定導航欄遮擋 */
body {
  padding-top: 64px;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* 修復暗色模式下導航欄與主頁面之間的空隙 */
:root[data-theme="dark"] html {
  background-color: #1a1a1a !important;
}

:root[data-theme="dark"] body {
  background-color: #1a1a1a !important;
}

/* 確保手機版暗色模式也使用正確的背景色 */
@media (max-width: 768px) {
  :root[data-theme="dark"] html {
    background-color: #1a1a1a !important;
  }

  :root[data-theme="dark"] body {
    background-color: #1a1a1a !important;
  }
}

/* 響應式設計 - 只適用於電腦版導航欄 */
@media (max-width: 768px) {
  .desktop-navbar .flex-container {
    flex-direction: column;
    padding: 10px 15px;
  }
  
  .desktop-navbar ul {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .desktop-navbar li {
    margin: 5px;
  }
  
  .desktop-navbar a {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .desktop-navbar .logo {
    font-size: 1.2rem;
  }
  
  .desktop-navbar .logo-text {
    display: none;
  }
  
  .desktop-navbar .nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .desktop-navbar a {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

/* 滾動效果 */
.fixed-navbar.scrolled {
  background-color: var(--bg-secondary);
  backdrop-filter: blur(10px);
}

/* 暗色模式下導航欄永遠使用深灰色背景 */
:root[data-theme="dark"] .fixed-navbar {
  background-color: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .fixed-navbar.scrolled {
  background-color: var(--bg-secondary) !important;
}

/* 動畫效果 - 已禁用以提升性能 */
.fixed-navbar {
  /* animation: slideDown 0.5s ease-out; */
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==================== 首頁樣式 ==================== */

.homepage-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--bg-secondary) !important;
  min-height: 100vh;
}

/* 歡迎區塊 */
.hero-section {
  text-align: center;
  padding: 4rem 0;
  background: var(--bg-color);
  color: var(--text-primary);
  margin: -20px -20px 3rem -20px;
  border-radius: 0 0 20px 20px;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 區塊標題 */
.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-primary);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--primary-color);
  margin: 10px auto;
  border-radius: 2px;
}

/* 文章網格 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 50rem; /* 原 3rem，增加下方空隙 */
}

/* 文章卡片 */
.post-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.3s ease !important;
}

.post-card:hover {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* 文章圖片 */
.post-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-image img {
  transform: scale(1.05);
}

.post-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.post-image-placeholder svg {
  width: 60px;
  height: 60px;
}

/* 文章內容 */
.post-content {
  padding: 1.5rem;
}

/* 文章元資訊 */
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.post-category {
  background: var(--primary-color);
  color: var(--text-inverse);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.75rem;
}

.post-date {
  color: var(--text-secondary);
  font-weight: 500;
}

/* 文章標題 */
.post-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.post-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--theme-transition-duration) var(--theme-transition-timing);
}

.post-title a:hover {
  color: var(--primary-color);
}

/* 文章摘要 */
.post-summary {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* 標籤 */
.post-tags {
  margin-bottom: 1rem;
}

.tag {
  display: inline-block;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}

/* 亮色模式下的標籤樣式 - 白色背景和漂亮邊框 */
:root[data-theme="light"] .tag {
  background: #ffffff !important;
  color: #4a5568 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="light"] .tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 暗色模式下保持原樣但添加邊框 */
:root[data-theme="dark"] .tag {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 2px solid #4a5568 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="dark"] .tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* 文章頁腳 */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.post-author {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reading-time {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 400;
}

.read-more {
  color: #007acc;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #0056b3;
}

/* 按鈕樣式 */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  /* 移除圓角 */
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #007acc;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: #007acc;
  border: 2px solid #007acc;
}

.btn-secondary:hover {
  background: #007acc;
  color: white;
}

/* 查看所有文章區塊 */
.view-all-posts {
  text-align: center;
  margin: 3rem 0;
}

/* 關於我預覽 */
.about-preview {
  background: var(--bg-tertiary);
  padding: 3rem 2rem;
  margin: 3rem 0;
  text-align: center;
  border-radius: 12px;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.about-content p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .homepage-container {
    padding: 0 15px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .post-content {
    padding: 1rem;
  }
  
  .hero-section {
    padding: 2rem 0;
    margin: -15px -15px 2rem -15px;
  }
}

@media (max-width: 480px) {
  .post-card {
    margin: 0 -5px;
  }
  
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .post-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==================== 所有文章時間線基本樣式 ==================== */

.all-posts-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
}

.all-posts-header {
  text-align: center;
  margin-bottom: 3rem;
}

.all-posts-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
}

.all-posts-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  margin: 15px auto;
  border-radius: 2px;
}

.all-posts-description {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left !important;
}

/* 確保all-posts-description中的內容左對齊 */
.all-posts-description h2 {
  text-align: left !important;
}

/* 時間線容器 */
.timeline-container {
  position: relative !important;
  padding-left: 120px !important;
}

/* 主時間線 */
.timeline-container::before {
  content: '' !important;
  position: absolute !important;
  left: 60px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, 
    var(--primary-color) 0%, 
    var(--border-color) 100%) !important;
  border-radius: 2px !important;
}

/* 年份區塊 */
.timeline-year-section {
  margin-bottom: 2rem;
  position: relative;
}

.timeline-year-header {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.timeline-year-dot {
  position: absolute !important;
  left: -68px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--primary-color) !important;
  border: 4px solid var(--bg-color) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px var(--primary-color) !important;
  z-index: 2 !important;
}

.timeline-year {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 1rem 0 0;
}

.timeline-year-count {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 文章卡片 */
.timeline-posts {
  margin-left: -40px;
}

.timeline-post-card {
  position: relative !important;
  background: transparent !important;
  margin-bottom: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
  padding-bottom: 0rem !important;
}

/* 最後一篇文章移除分隔線 */
.timeline-post-card:last-child {
  border-bottom: none !important;
  border-image: none !important;
}

.timeline-post-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.timeline-post-main:hover {
  transform: translateX(5px) !important;
  transition: all 0.3s ease !important;
}

.timeline-post-thumbnail:hover {
  transform: scale(1.02) !important;
  transition: all 0.3s ease !important;
}

/* 覆蓋theme.css中的邊框設定 */
:root[data-theme="light"] .timeline-post-card {
  border: none !important;
  background: #ffffff !important;
}

:root[data-theme="dark"] .timeline-post-card {
  border: none !important;
  background: var(--bg-secondary) !important;
}

:root[data-theme="light"] .timeline-post-card:hover {
  border: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .timeline-post-card:hover {
  border: none !important;
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}

/* 隱藏小圓點連接線 */
.timeline-post-connector {
  display: none !important;
}

/* 文章內容布局 */
.timeline-post-content {
  display: grid !important;
  grid-template-columns: 80px 1fr 140px !important;
  gap: 1.2rem !important;
  padding: 0 !important;
  align-items: flex-start !important;
  min-height: 100px !important;
}

/* 日期顯示 - 與時間線整合 */
.timeline-post-date {
  text-align: center;
  font-weight: 600;
  opacity: 0.8;
  color: var(--text-secondary);
  padding: 0;
  transition: all 0.3s ease;
}

.timeline-post-date .month {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin-bottom: 0.2rem;
}

.timeline-post-date .day {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}

/* 文章主要內容 */
.timeline-post-main {
  min-height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.timeline-post-title {
  margin: 0 0 0.5rem 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  max-height: 3.25rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.timeline-post-title a {
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  color: var(--text-primary) !important;
}

.timeline-post-title a:hover {
  color: var(--primary-color) !important;
}

.timeline-post-summary {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.5rem 0 !important;
  color: var(--text-secondary) !important;
  max-height: 4.2rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.timeline-post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  font-size: 0.875rem !important;
}

.timeline-post-category {
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.timeline-post-tags {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.timeline-tag {
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}

/* 亮色模式下的時間軸標籤樣式 - 白色背景和漂亮邊框 */
:root[data-theme="light"] .timeline-tag {
  background: #ffffff !important;
  color: #4a5568 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="light"] .timeline-tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 暗色模式下的時間軸標籤樣式 */
:root[data-theme="dark"] .timeline-tag {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 2px solid #4a5568 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="dark"] .timeline-tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.3) !important;
  transform: translateY(-1px) !important;
}

.timeline-post-reading-time {
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
}

/* 文章縮圖 */
.timeline-post-thumbnail {
  width: 120px !important;
  height: 120px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.3s ease !important;
}

.timeline-post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.timeline-post-card:hover .timeline-post-thumbnail img {
  transform: scale(1.1) !important;
}

.timeline-post-thumbnail-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(45deg, var(--bg-tertiary), var(--border-color)) !important;
  color: var(--text-tertiary) !important;
  transition: 
    background var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

.timeline-post-thumbnail-placeholder svg {
  width: 40px;
  height: 40px;
}

/* 箭頭指示器 */
.timeline-post-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  opacity: 0;
}

.timeline-post-card:hover .timeline-post-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(5px);
}

.timeline-post-arrow svg {
  width: 24px;
  height: 24px;
}

/* 沒有文章時的訊息 */
.no-posts-message {
  text-align: center;
  padding: 4rem 2rem;
  font-size: 1.1rem;
}



/* 時間線響應式 */
@media (max-width: 768px) {
  .all-posts-container {
    padding: 1rem 0.5rem;
  }
  
  .timeline-container {
    padding-left: 50px;
  }
  
  .timeline-container::before {
    left: 25px;
  }
  
  .timeline-year-dot {
    left: -33px;
    width: 16px;
    height: 16px;
  }
  
  .timeline-year {
    font-size: 1.5rem;
  }
  
  .timeline-posts {
    margin-left: -10px;
  }
  
  .timeline-post-connector {
    left: -8px;
  }
  
  .timeline-post-content {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 !important;
    margin-bottom: 0rem !important;
  }
  
  .timeline-post-thumbnail {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    transition: 
      background-color var(--theme-transition-duration) var(--theme-transition-timing),
      border-color var(--theme-transition-duration) var(--theme-transition-timing),
      transform 0.3s ease !important;
  }
  
  .timeline-post-meta {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .all-posts-container {
    padding: 1rem 0.3rem;
  }
  
  .timeline-container {
    padding-left: 35px;
  }
  
  .timeline-container::before {
    left: 18px;
  }
  
  .timeline-year-dot {
    left: -26px;
    width: 12px;
    height: 12px;
  }
  
  .timeline-post-connector {
    left: -3px;
    width: 8px;
    height: 8px;
  }
  
  .timeline-posts {
    margin-left: -5px;
  }
  
  .all-posts-title {
    font-size: 2rem;
  }
  
  .timeline-post-content {
    padding: 0 !important;
    margin-bottom: 0rem !important;
  }
}

/* ==================== 單篇文章基本樣式 ==================== */

.single-post {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  color: var(--text-primary) !important;
  min-height: 100vh !important;
  border-radius: 12px !important;
}

/* 亮色模式：純白色背景 */
:root[data-theme="light"] .single-post {
  background: #ffffff !important;
}

/* 暗色模式：深灰色背景 */
:root[data-theme="dark"] .single-post {
  background: #1a1a1a !important;
}

/* 封面圖片樣式 */
.post-cover-image {
  margin: -2rem -2rem 2rem -20px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.post-cover-image img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
}

.post-header {
  padding-bottom: 2rem !important;
  margin-bottom: 2rem !important;
}

.post-meta-single {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 0.875rem !important;
  color: var(--text-secondary) !important;
}

.post-title-single {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
}

.post-description {
  font-size: 1.2rem !important;
  margin-bottom: 1rem !important;
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

.post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-size: 0.875rem !important;
  color: var(--text-secondary) !important;
}

.post-content-single {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: var(--text-primary) !important;
}

.post-content-single h1 {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  margin: 2.5rem 0 1.5rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H1 */
@media (max-width: 768px) {
  .post-content-single h1 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h2 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin: 2rem 0 1rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--primary-color) !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H2 */
@media (max-width: 768px) {
  .post-content-single h2 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 1rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H3 */
@media (max-width: 768px) {
  .post-content-single h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h4 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 1rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H4 */
@media (max-width: 768px) {
  .post-content-single h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single p {
  margin-bottom: 1.5rem !important;
  color: var(--text-primary) !important;
}

.post-content-single ul, 
.post-content-single ol {
  margin-bottom: 1.5rem !important;
  padding-left: 2rem !important;
  color: var(--text-primary) !important;
}

.post-content-single li {
  margin-bottom: 0.5rem !important;
  color: var(--text-primary) !important;
}

.post-content-single blockquote {
  border-left: 4px solid var(--primary-color) !important;
  padding: 1rem 2rem !important;
  margin: 2rem 0 !important;
  background: var(--bg-tertiary) !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: var(--text-primary) !important;
}

.post-content-single code {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1.05em !important;
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
}

.post-content-single pre {
  padding: 1.5rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.5rem 0 !important;
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
  font-size: 1.05em !important;
}

.post-content-single pre code {
  background: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* 強制覆蓋暗色主題下的代碼區塊背景色為 #1a1a1a - 排除Mermaid */
:root[data-theme="dark"] .post-content-single code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
:root[data-theme="dark"] code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="dark"] pre:not(.mermaid-container pre):not(.mermaid) {
  background: #1a1a1a !important;
  border: 1px solid #4a4a4a !important;
}

:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code,
:root[data-theme="dark"] pre:not(.mermaid-container pre):not(.mermaid) code {
  background: none !important;
  border: none !important;
}

/* 亮色主題下的代碼區塊邊框 - 排除Mermaid */
:root[data-theme="light"] .post-content-single code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
:root[data-theme="light"] code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="light"] pre:not(.mermaid-container pre):not(.mermaid) {
  border: none !important;
}

:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code,
:root[data-theme="light"] pre:not(.mermaid-container pre):not(.mermaid) code {
  border: none !important;
}

.post-content-single img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 2rem auto !important;
}

.post-tags-single {
  margin: 2rem 0 !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  background: var(--bg-tertiary) !important;
}

.post-tags-single h3 {
  margin: 0 0 1rem 0 !important;
  font-size: 1.1rem !important;
  color: var(--text-primary) !important;
}

.tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.post-navigation {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 1rem !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 2px solid var(--border-color) !important;
}

.nav-prev {
  text-align: left !important;
}

.nav-all-posts {
  text-align: center !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.nav-all-posts:hover {
  background: var(--primary-hover) !important;
}

.nav-next {
  text-align: right !important;
}

.nav-prev, .nav-next {
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 6px !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  color: var(--primary-color) !important;
}

.nav-prev:hover, .nav-next:hover {
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

/* 單篇文章響應式 */
@media (max-width: 768px) {
  .single-post {
    margin: 0 15px !important;
    padding: 1.5rem !important;
  }
  
  .post-title-single {
    font-size: 2rem !important;
  }
  
  .post-navigation {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  
  .nav-prev, .nav-next {
    margin-bottom: 1rem !important;
  }
}

/* 版權信息樣式 */
.copyright-footer {
  position: relative;
  text-align: center;
  padding: 20px 20px 20px 20px;
  margin-top: 40px;
}

.copyright-footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--text-secondary) 20%, var(--text-secondary) 80%, transparent);
  opacity: 0.5;
}

.copyright-footer p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.copyright-footer:hover p {
  opacity: 1;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .copyright-footer {
    padding: 15px 15px 15px 15px;
    margin-top: 30px;
  }

  .copyright-footer::before {
    top: -15px;
    width: 70%;
  }
  
  .copyright-footer p {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .copyright-footer {
    padding: 10px 10px 10px 10px;
    margin-top: 20px;
  }

  .copyright-footer::before {
    top: -10px;
    width: 80%;
  }
  
  .copyright-footer p {
    font-size: 0.65rem;
  }
}

/* ==================== 簡化技能區塊樣式 ==================== */

.skills-section {
  margin: 2rem 0;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 2rem;
}

/* 亮色主題下使用全白背景 */
:root[data-theme="light"] .skills-section {
  background: #ffffff !important;
}

.skills-text-section {
  margin-bottom: 2rem;
}

.skills-text-section h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-align: center;
}

.skills-bars-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skill-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.skill-info {
  display: flex;
  align-items: center;
}

.skill-name {
  font-weight: 500;
  color: var(--text-primary);
}

.skill-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: var(--primary-color);
  border-radius: 4px;
  transition: width 1.5s ease-out;
}

@media (max-width: 768px) {
  .skills-section {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  .skill-name {
    font-size: 0.9rem;
  }
  
  .skills-bars-section {
    gap: 1.2rem;
  }
}

/* ==================== About頁面響應式設計 ==================== */

/* 平板和手機響應式設計 */
@media (max-width: 768px) {
  .about-intro-section {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .about-sidebar {
    width: 100% !important;
    text-align: center;
  }
  
  .profile-image {
    width: 200px !important;
    height: 200px !important;
  }
  
  .contact-info {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* 小手機響應式設計 */
@media (max-width: 480px) {
  .about-intro-section {
    gap: 1.5rem !important;
  }
  
  .profile-image {
    width: 150px !important;
    height: 150px !important;
  }
  
  .contact-info {
    padding: 1rem !important;
  }
  
  .about-main-title {
    font-size: 1.5rem !important;
  }
}

/* Email 訂閱區塊樣式 */
.email-subscription {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 1.5rem 2rem;
  margin: 1.5rem 0 1rem;
  border-radius: 16px;
  text-align: center;
}

/* 雙欄底部容器 */
.footer-dual-container {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  justify-content: flex-end;
  align-items: flex-start;
  background: #1A1A1A !important; /* 深色背景 */
  padding: 2rem 1rem 1rem;
  border-radius: 0;
}

/* 亮色模式下的主頁底部區塊 */
:root[data-theme="light"] .footer-dual-container {
  background: #ffffff !important; /* 白色背景 */
}

/* 非about頁面的訂閱區塊 - 小尺寸左側 */
.email-subscription.with-separator {
  padding: 1.5rem 1rem;
  margin: 0;
  border-radius: 12px;
  max-width: 480px;
  flex: 1;
  margin-left: auto;
  margin-right: 10rem;
}

.email-subscription.with-separator p {
  font-size: 1rem;
  margin: 0 0 1rem;
}

.email-subscription.with-separator .email-input-group {
  max-width: 100%;
  gap: 0.5rem;
  min-width: 400px;
}

.email-subscription.with-separator .email-input-group input {
  padding: 0.75rem 0.875rem;
  font-size: 0.9rem;
}

.email-subscription.with-separator .email-input-group button {
  padding: 0.3rem 0.8rem !important; /* 縮小上下左右內距 */
  font-size: 0.8rem !important;   /* 字體略小 */
}

/* 底部聯絡資訊區塊 */
.footer-contact-info {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  padding: 1.2rem 1rem;
  border-radius: 12px;
  max-width: 300px;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4rem;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.75rem;
  border-radius: 50%;
  transform: translateY(0);
  width: 44px;
  height: 44px;
  background: #3a3a3a !important; /* 暗色模式：比1A1A1A淺的灰色背景 */
}

.contact-link:hover {
  background: #4a4a4a !important; /* hover時更淺 */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

.contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 暗色模式下全局樣式 */
:root[data-theme="dark"] .contact-link {
  background: #3a3a3a !important; /* 比1A1A1A淺的灰色背景 */
  color: white !important;
}

:root[data-theme="dark"] .contact-link:hover {
  background: #4a4a4a !important; /* hover時更淺 */
  color: white !important;
}

:root[data-theme="dark"] .contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

:root[data-theme="dark"] .contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 亮色模式下全局樣式 */
:root[data-theme="light"] .contact-link {
  background: #ffffff !important; /* 純白色背景 */
  color: black !important;
  border: 1px solid #e5e5e5 !important; /* 添加淺灰色邊框以便識別 */
}

:root[data-theme="light"] .contact-link:hover {
  background: #f5f5f5 !important; /* hover時淺灰色 */
  color: black !important;
}

:root[data-theme="light"] .contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

:root[data-theme="light"] .contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 主頁底部的contact-link已由全局樣式處理 */

/* 隱藏非about頁面聯絡資訊的文字 */
.contact-link .contact-text {
  display: none;
}

/* 社交媒體圖標容器 */
.contact-social-icons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/* 電子郵箱文字樣式 */
.contact-email-text {
  color: white;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.9;
  word-break: break-all;
}



.contact-links svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 暗色模式下的郵件訂閱區塊 */
:root[data-theme="dark"] .email-subscription {
  background: #1a1a1a;
}

:root[data-theme="dark"] .email-subscription p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 暗色模式下的底部聯絡資訊 */
:root[data-theme="dark"] .footer-contact-info {
  background: #1a1a1a;
}

:root[data-theme="dark"] .contact-email-text {
  color: rgba(255, 255, 255, 0.8);
}

/* 亮色模式下的電子郵箱文字 */
:root[data-theme="light"] .contact-email-text {
  color: rgba(0, 0, 0, 0.8);
}

/* 其他頁面的訂閱區塊 - 帶分隔線 */
.email-subscription.with-separator {
  position: relative;
  border: none !important; /* 移除邊框 */
  background: #1A1A1A !important; /* 深色背景 */
}

/* 亮色模式下的主頁 Stay Updated 區塊 */
:root[data-theme="light"] .email-subscription.with-separator {
  background: #ffffff !important; /* 白色背景 */
}

/* About頁面的訂閱區塊 */
.about-subscription {
  margin: 1rem 0 0;
  padding: 0.5rem 0.5rem;
  max-width: 280px;
  width: 100%;
}

/* About頁面的email輸入組 - 垂直布局 */
.about-subscription .email-input-group {
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
}

.about-subscription .email-input-group input {
  width: 100%;
}

.about-subscription .email-input-group button {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.subscription-container {
  max-width: 500px;
  margin: 0 auto;
}

.email-subscription h3 {
  color: white;
  font-size: 1.8rem;
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.email-subscription p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
  line-height: 1.6;
}

.subscription-form {
  margin-bottom: 0.5rem;
}

.email-input-group {
  display: flex;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
}

.email-input-group input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-input-group input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.email-input-group button {
  padding: 0.875rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transform: translateY(0);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.email-input-group button:hover {
  background: white;
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: white;
}

/* 暗色模式下的按鈕樣式 */
:root[data-theme="dark"] .email-input-group button {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .email-input-group button:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 暗色模式下的輸入框樣式 */
:root[data-theme="dark"] .email-input-group input {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .email-input-group input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .email-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* 郵件訂閱輸入框狀態樣式 */
.email-input-success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border: 2px solid #28a745 !important;
}

.email-input-success::placeholder {
  color: #155724 !important;
  font-weight: 500;
}

.email-input-error {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border: 2px solid #dc3545 !important;
}

.email-input-error::placeholder {
  color: #721c24 !important;
  font-weight: 500;
}

/* 深色模式下的輸入框狀態樣式 */
:root[data-theme="dark"] .email-input-success {
  background-color: rgba(40, 167, 69, 0.15) !important;
  color: #9fdb9f !important;
  border: 2px solid #28a745 !important;
}

:root[data-theme="dark"] .email-input-success::placeholder {
  color: #9fdb9f !important;
}

:root[data-theme="dark"] .email-input-error {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #f8a5aa !important;
  border: 2px solid #dc3545 !important;
}

:root[data-theme="dark"] .email-input-error::placeholder {
  color: #f8a5aa !important;
}

  /* 響應式設計 - Email訂閱 */
@media (max-width: 768px) {
  .email-subscription {
    padding: 1.2rem 1rem;
    margin: 1rem auto 0.5rem auto;
    text-align: center;
  }

  .email-subscription h3 {
    font-size: 1.5rem;
  }

  .email-subscription p {
    font-size: 1rem;
  }

  .email-input-group {
    flex-direction: row;
    max-width: 320px;
    margin: 0 auto;
    width: 95%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
  }

  .email-input-group input {
    flex: 4;
    text-align: center;
    padding: 0.8rem 1rem;
    min-width: 0;
  }

  .email-input-group button {
    flex: 1;
    padding: 0.8rem 0.3rem;
    white-space: nowrap;
    min-width: 50px;
    max-width: 65px;
    font-size: 0.9rem;
  }

  /* About頁面的訂閱區塊響應式 */
  .about-subscription {
    max-width: 100%;
    padding: 1.5rem 1rem;
    margin: 0 auto;
    text-align: center;
  }

  .about-subscription h3 {
    font-size: 1.3rem;
  }

  .about-subscription p {
    font-size: 0.9rem;
  }

  .about-subscription .email-input-group {
    max-width: 100%;
  }

  /* 響應式設計 - 雙欄底部 */
  .footer-dual-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .email-subscription.with-separator {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  .email-subscription.with-separator .email-input-group {
    min-width: auto;
  }

  .footer-contact-info {
    max-width: 100%;
  }
  
  .contact-links {
    gap: 0.75rem;
  }
  
  .contact-social-icons {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .contact-link {
    width: 40px;
    height: 40px;
    padding: 0.6rem;
  }
  
  .contact-links svg {
    width: 18px;
    height: 18px;
  }
  
  .contact-email-text {
    font-size: 0.8rem;
  }


}

/* ==================== Chroma語法高亮樣式覆蓋 ==================== */

/* ==================== VS Code Dark Modern 主題配色 ==================== */

/* 亮色模式下的代碼樣式 - 排除Mermaid */
:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
  background: #f8f9fa !important;
  color: #374151 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  position: relative !important;
}

:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code {
  background: transparent !important;
  color: #374151 !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit !important;
}

:root[data-theme="light"] .post-content-single code:not(pre code) {
  background: #f8f9fa !important;
  color: #374151 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 13px !important;
  border: none !important;
}

/* 暗色模式下的代碼樣式 - 排除Mermaid */
:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  position: relative !important;
}

:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code {
  background: transparent !important;
  color: #d4d4d4 !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit !important;
}

:root[data-theme="dark"] .post-content-single code:not(pre code) {
  background: #2d2d30 !important;
  color: #d4d4d4 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 13px !important;
  border: none !important;
}

/* ==================== 亮色模式語法高亮 ==================== */

/* 亮色模式 - Python 關鍵字 */
:root[data-theme="light"] .chroma .k,
:root[data-theme="light"] .chroma .kc,
:root[data-theme="light"] .chroma .kd,
:root[data-theme="light"] .chroma .kn,
:root[data-theme="light"] .chroma .kp,
:root[data-theme="light"] .chroma .kr,
:root[data-theme="light"] .chroma .kt {
  color: #0000ff !important;
  font-weight: normal !important;
}

/* 亮色模式 - 字串 */
:root[data-theme="light"] .chroma .s,
:root[data-theme="light"] .chroma .sa,
:root[data-theme="light"] .chroma .sb,
:root[data-theme="light"] .chroma .sc,
:root[data-theme="light"] .chroma .dl,
:root[data-theme="light"] .chroma .sd,
:root[data-theme="light"] .chroma .s2,
:root[data-theme="light"] .chroma .se,
:root[data-theme="light"] .chroma .sh,
:root[data-theme="light"] .chroma .si,
:root[data-theme="light"] .chroma .sx,
:root[data-theme="light"] .chroma .sr,
:root[data-theme="light"] .chroma .s1,
:root[data-theme="light"] .chroma .ss {
  color: #a31515 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 數字 */
:root[data-theme="light"] .chroma .m,
:root[data-theme="light"] .chroma .mb,
:root[data-theme="light"] .chroma .mf,
:root[data-theme="light"] .chroma .mh,
:root[data-theme="light"] .chroma .mi,
:root[data-theme="light"] .chroma .il,
:root[data-theme="light"] .chroma .mo {
  color: #098658 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 註釋 */
:root[data-theme="light"] .chroma .c,
:root[data-theme="light"] .chroma .ch,
:root[data-theme="light"] .chroma .cm,
:root[data-theme="light"] .chroma .c1,
:root[data-theme="light"] .chroma .cs,
:root[data-theme="light"] .chroma .cp,
:root[data-theme="light"] .chroma .cpf {
  color: #008000 !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* 亮色模式 - 函數名 */
:root[data-theme="light"] .chroma .nf,
:root[data-theme="light"] .chroma .fm {
  color: #795e26 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 類名 */
:root[data-theme="light"] .chroma .nc,
:root[data-theme="light"] .chroma .no,
:root[data-theme="light"] .chroma .nd {
  color: #267f99 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 變數名 */
:root[data-theme="light"] .chroma .n,
:root[data-theme="light"] .chroma .na,
:root[data-theme="light"] .chroma .nb,
:root[data-theme="light"] .chroma .bp,
:root[data-theme="light"] .chroma .nv,
:root[data-theme="light"] .chroma .vc,
:root[data-theme="light"] .chroma .vg,
:root[data-theme="light"] .chroma .vi,
:root[data-theme="light"] .chroma .vm,
:root[data-theme="light"] .chroma .nx {
  color: #001080 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 操作符和標點符號 */
:root[data-theme="light"] .chroma .o,
:root[data-theme="light"] .chroma .ow,
:root[data-theme="light"] .chroma .p {
  color: #000000 !important;
  font-weight: normal !important;
}

/* ==================== 暗色模式語法高亮 ==================== */

/* 暗色模式 - Python 關鍵字 */
:root[data-theme="dark"] .chroma .k,
:root[data-theme="dark"] .chroma .kc,
:root[data-theme="dark"] .chroma .kd,
:root[data-theme="dark"] .chroma .kn,
:root[data-theme="dark"] .chroma .kp,
:root[data-theme="dark"] .chroma .kr,
:root[data-theme="dark"] .chroma .kt {
  color: #569cd6 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 字串 */
:root[data-theme="dark"] .chroma .s,
:root[data-theme="dark"] .chroma .sa,
:root[data-theme="dark"] .chroma .sb,
:root[data-theme="dark"] .chroma .sc,
:root[data-theme="dark"] .chroma .dl,
:root[data-theme="dark"] .chroma .sd,
:root[data-theme="dark"] .chroma .s2,
:root[data-theme="dark"] .chroma .se,
:root[data-theme="dark"] .chroma .sh,
:root[data-theme="dark"] .chroma .si,
:root[data-theme="dark"] .chroma .sx,
:root[data-theme="dark"] .chroma .sr,
:root[data-theme="dark"] .chroma .s1,
:root[data-theme="dark"] .chroma .ss {
  color: #ce9178 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 數字 */
:root[data-theme="dark"] .chroma .m,
:root[data-theme="dark"] .chroma .mb,
:root[data-theme="dark"] .chroma .mf,
:root[data-theme="dark"] .chroma .mh,
:root[data-theme="dark"] .chroma .mi,
:root[data-theme="dark"] .chroma .il,
:root[data-theme="dark"] .chroma .mo {
  color: #b5cea8 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 註釋 */
:root[data-theme="dark"] .chroma .c,
:root[data-theme="dark"] .chroma .ch,
:root[data-theme="dark"] .chroma .cm,
:root[data-theme="dark"] .chroma .c1,
:root[data-theme="dark"] .chroma .cs,
:root[data-theme="dark"] .chroma .cp,
:root[data-theme="dark"] .chroma .cpf {
  color: #6a9955 !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* 暗色模式 - 函數名 */
:root[data-theme="dark"] .chroma .nf,
:root[data-theme="dark"] .chroma .fm {
  color: #dcdcaa !important;
  font-weight: normal !important;
}

/* 暗色模式 - 類名 */
:root[data-theme="dark"] .chroma .nc,
:root[data-theme="dark"] .chroma .no,
:root[data-theme="dark"] .chroma .nd {
  color: #4ec9b0 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 變數名 */
:root[data-theme="dark"] .chroma .n,
:root[data-theme="dark"] .chroma .na,
:root[data-theme="dark"] .chroma .nb,
:root[data-theme="dark"] .chroma .bp,
:root[data-theme="dark"] .chroma .nv,
:root[data-theme="dark"] .chroma .vc,
:root[data-theme="dark"] .chroma .vg,
:root[data-theme="dark"] .chroma .vi,
:root[data-theme="dark"] .chroma .vm,
:root[data-theme="dark"] .chroma .nx {
  color: #9cdcfe !important;
  font-weight: normal !important;
}

/* 暗色模式 - 內建函數 */
:root[data-theme="dark"] .chroma .nb,
:root[data-theme="dark"] .chroma .bp {
  color: #4fc1ff !important;
  font-weight: normal !important;
}

/* ==================== Bash/Shell 語法高亮 ==================== */

/* Bash 關鍵字和命令 */
.language-bash .chroma .k,
.language-sh .chroma .k,
.language-shell .chroma .k {
  color: #569cd6 !important;
}

/* Bash 字串 */
.language-bash .chroma .s,
.language-bash .chroma .s1,
.language-bash .chroma .s2,
.language-sh .chroma .s,
.language-sh .chroma .s1,
.language-sh .chroma .s2,
.language-shell .chroma .s,
.language-shell .chroma .s1,
.language-shell .chroma .s2 {
  color: #ce9178 !important;
}

/* Bash 變數 ($var, ${var}) */
.language-bash .chroma .nv,
.language-bash .chroma .vg,
.language-sh .chroma .nv,
.language-sh .chroma .vg,
.language-shell .chroma .nv,
.language-shell .chroma .vg {
  color: #9cdcfe !important;
}

/* ==================== JSON 語法高亮 ==================== */

/* JSON 屬性名 */
.language-json .chroma .na,
.language-json .chroma .nx {
  color: #9cdcfe !important;
  font-weight: normal !important;
}

/* JSON 字串值 */
.language-json .chroma .s,
.language-json .chroma .s1,
.language-json .chroma .s2 {
  color: #ce9178 !important;
}

/* JSON 數字 */
.language-json .chroma .m,
.language-json .chroma .mi,
.language-json .chroma .mf {
  color: #b5cea8 !important;
}

/* JSON 布林值和 null */
.language-json .chroma .kc {
  color: #569cd6 !important;
}

/* 暗色模式 - 操作符和標點符號 */
:root[data-theme="dark"] .chroma .o,
:root[data-theme="dark"] .chroma .ow,
:root[data-theme="dark"] .chroma .p {
  color: #d4d4d4 !important;
  font-weight: normal !important;
}

/* ==================== 錯誤和其他 ==================== */

/* 錯誤高亮 */
.chroma .err {     /* error */
  color: #f44747 !important;
  background-color: transparent !important;
}

/* 通用標記 */
.chroma .g {       /* generic */
  color: #d4d4d4 !important;
}

/* 刪除/插入標記 */
.chroma .gd {      /* generic deleted */
  color: #f44747 !important;
}

.chroma .gi {      /* generic inserted */
  color: #608b4e !important;
}

/* ==================== 通用覆蓋規則 ==================== */

/* 亮色模式下確保所有 chroma 容器都使用正確的背景 */
:root[data-theme="light"] .chroma,
:root[data-theme="light"] .highlight {
  background: #f8f9fa !important;
  color: #374151 !important;
}

/* 暗色模式下確保所有 chroma 容器都使用正確的背景 */
:root[data-theme="dark"] .chroma,
:root[data-theme="dark"] .highlight {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

/* 確保行號也使用正確的顏色 */
.chroma .ln,       /* line numbers */
.chroma .lnt {     /* line numbers table */
  color: #858585 !important;
  background: transparent !important;
}

/* 移除所有預設的背景色 */
.chroma .hl {
  background-color: #2d2d30 !important;
}

/* ==================== 特殊語言支持 ==================== */

/* JavaScript/TypeScript */
.language-javascript .chroma .nx,
.language-js .chroma .nx,
.language-typescript .chroma .nx,
.language-ts .chroma .nx {
  color: #9cdcfe !important;
}

/* CSS */
.language-css .chroma .nc {      /* CSS class selector */
  color: #d7ba7d !important;
}

.language-css .chroma .nf {      /* CSS function */
  color: #dcdcaa !important;
}

/* HTML */
.language-html .chroma .nt {     /* HTML tag name */
  color: #569cd6 !important;
}

.language-html .chroma .na {     /* HTML attribute name */
  color: #9cdcfe !important;
}

/* ==================== 強制覆蓋所有可能的選擇器 ==================== */

/* 亮色模式 - 最高優先級覆蓋 */
:root[data-theme="light"] body .post-content-single pre .chroma,
:root[data-theme="light"] body .post-content-single code .chroma,
:root[data-theme="light"] body .chroma,
:root[data-theme="light"] html body .chroma {
  background: #f8f9fa !important;
  color: #374151 !important;
}

/* 暗色模式 - 最高優先級覆蓋 */
:root[data-theme="dark"] body .post-content-single pre .chroma,
:root[data-theme="dark"] body .post-content-single code .chroma,
:root[data-theme="dark"] body .chroma,
:root[data-theme="dark"] html body .chroma {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

/* 移除任何可能的黃色高亮 */
pre *[style*="color: #ffff"],
pre *[style*="color: #ff9"],
pre *[style*="color: yellow"],
code *[style*="color: #ffff"],
code *[style*="color: #ff9"],
code *[style*="color: yellow"] {
  color: #9cdcfe !important;
}

/* 亮色模式下的代碼區塊整體樣式 */
:root[data-theme="light"] .post-content-single .highlight,
:root[data-theme="light"] .post-content-single .chroma {
  background: #f8f9fa !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  position: relative !important;
}



/* 暗色模式下的代碼區塊整體樣式 */
:root[data-theme="dark"] .post-content-single .highlight,
:root[data-theme="dark"] .post-content-single .chroma {
  background: #1e1e1e !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  position: relative !important;
}

/* 技術關鍵字樣式 */
.tech-keyword {
  color: #007acc !important;
  font-weight: 600 !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

:root[data-theme="dark"] .tech-keyword {
  color: #4A90E2 !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    padding: 0.75rem !important;
    font-size: 14px !important;
    margin: 0.75rem 0 !important;
  }
  
  :root[data-theme="light"] .post-content-single .highlight,
  :root[data-theme="light"] .post-content-single .chroma,
  :root[data-theme="dark"] .post-content-single .highlight,
  :root[data-theme="dark"] .post-content-single .chroma {
    padding: 0.75rem !important;
    margin: 0.75rem 0 !important;
  }
}

@media (max-width: 480px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    padding: 0.5rem !important;
    font-size: 13px !important;
  }
  
  :root[data-theme="light"] .post-content-single .highlight,
  :root[data-theme="light"] .post-content-single .chroma,
  :root[data-theme="dark"] .post-content-single .highlight,
  :root[data-theme="dark"] .post-content-single .chroma {
    padding: 0.5rem !important;
  }
}

/* ==================== 改進Python語法高亮 (參考VSCode Dark Modern) ==================== */

/* 提高優先級的Python專用語法高亮 - 必須在通用規則之後以覆蓋它們 */

/* Python 模組名稱 (from xxx import) - 使用VS Code風格的青綠色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nn,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nn,
:root[data-theme="dark"] .language-python .chroma .nn {
  color: #4EC9B0 !important; /* VS Code的青綠色 */
  font-weight: normal !important;
}

/* Python 導入的類名和函數名 - 使用VS Code風格的黃色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nc,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nf,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nc,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nf,
:root[data-theme="dark"] .language-python .chroma .nc,
:root[data-theme="dark"] .language-python .chroma .nf {
  color: #DCDCAA !important; /* VS Code的淺黃色 */
  font-weight: normal !important;
}

/* Python 導入關鍵字 from/import - 保持藍色但稍微調亮 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .kn,
:root[data-theme="dark"] .post-content-single .language-python .chroma .kn,
:root[data-theme="dark"] .language-python .chroma .kn {
  color: #569CD6 !important; /* VS Code的藍色 */
  font-weight: normal !important;
}

/* Python 字符串 - 使用VS Code的橙色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s1,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s2,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s1,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s2,
:root[data-theme="dark"] .language-python .chroma .s,
:root[data-theme="dark"] .language-python .chroma .s1,
:root[data-theme="dark"] .language-python .chroma .s2 {
  color: #CE9178 !important; /* VS Code的橙色 */
  font-weight: normal !important;
}

/* Python 變數名 - 使用VS Code的淺藍色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .n,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nx,
:root[data-theme="dark"] .post-content-single .language-python .chroma .n,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nx,
:root[data-theme="dark"] .language-python .chroma .n,
:root[data-theme="dark"] .language-python .chroma .nx {
  color: #9CDCFE !important; /* VS Code的淺藍色 */
  font-weight: normal !important;
}

/* Python 內建函數 - 使用VS Code的亮藍色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nb,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nb,
:root[data-theme="dark"] .language-python .chroma .nb {
  color: #4FC1FF !important; /* VS Code的亮藍色 */
  font-weight: normal !important;
}

/* Python 註釋 - 使用VS Code的綠色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .c,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .c1,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .cm,
:root[data-theme="dark"] .post-content-single .language-python .chroma .c,
:root[data-theme="dark"] .post-content-single .language-python .chroma .c1,
:root[data-theme="dark"] .post-content-single .language-python .chroma .cm,
:root[data-theme="dark"] .language-python .chroma .c,
:root[data-theme="dark"] .language-python .chroma .c1,
:root[data-theme="dark"] .language-python .chroma .cm {
  color: #6A9955 !important; /* VS Code的綠色 */
  font-style: italic !important;
  font-weight: normal !important;
}

/* ==================== 手機樣式優化 ==================== */

/* 更小的手機屏幕優化 (360px以下) */
@media (max-width: 360px) {
  /* 導航欄優化 - 只適用於電腦版 */
  .desktop-navbar .flex-container {
    padding: 8px 10px;
  }
  
  .desktop-navbar .logo-text {
    font-size: 1rem;
  }
  
  .desktop-navbar .nav-avatar {
    width: 30px;
    height: 30px;
  }
  
  .desktop-navbar ul {
    gap: 0.5rem;
  }
  
  .desktop-navbar a {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  
  /* 不覆蓋現有的body padding-top */
  
  /* 首頁優化 */
  .homepage-container {
    padding: 0 10px;
  }
  
  .hero-content h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .hero-content p {
    font-size: 0.9rem;
  }
  
  .hero-section {
    padding: 1.5rem 0;
    margin: -10px -10px 1.5rem -10px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  /* 文章卡片優化 */
  .post-card {
    margin: 0 -5px;
  }
  
  .post-content {
    padding: 0.75rem;
  }
  
  .post-title {
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  .post-summary {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  /* 時間線優化 */
  .all-posts-container {
    padding: 0.75rem;
  }
  
  .timeline-container {
    padding-left: 50px;
  }
  
  .timeline-container::before {
    left: 25px;
    width: 3px;
  }
  
  .timeline-year {
    font-size: 1.25rem;
  }
  
  .timeline-year-dot {
    left: -33px;
    width: 10px;
    height: 10px;
  }
  
  .timeline-post-connector {
    left: -10px;
    width: 6px;
    height: 6px;
  }
  
  .timeline-post-content {
    grid-template-columns: 1fr;
  }
  
  .timeline-post-thumbnail {
    width: 60px;
    height: 60px;
  }
  
  /* 單篇文章優化 */
  .single-post {
    margin: 0 10px !important;
    padding: 1rem !important;
  }
  
  .post-title-single {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .post-content-single {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  
  /* 手機版文章標題字體調小 - 最強選擇器強制覆蓋 */
  body .single-post .post-content-single h1,
  html body .single-post .post-content-single h1,
  .single-post .post-content-single h1 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h2,
  html body .single-post .post-content-single h2,
  .single-post .post-content-single h2 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h3,
  html body .single-post .post-content-single h3,
  .single-post .post-content-single h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h4,
  html body .single-post .post-content-single h4,
  .single-post .post-content-single h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .post-navigation {
    gap: 0.75rem !important;
  }
  
  .nav-prev, .nav-next, .nav-all-posts {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* 手機版簡化All Posts時間軸 */
@media (max-width: 768px) {
  /* 手機版All Posts描述文字調小 - 針對h2標籤 */
  .all-posts-container .all-posts-description {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
  }
  
  .all-posts-container .all-posts-description h2 {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  
  .all-posts-container .all-posts-description p,
  .all-posts-container .all-posts-description * {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  /* 隱藏複雜的時間軸視覺元素 */
  .timeline-container::before,
  .timeline-year-dot,
  .timeline-post-connector {
    display: none !important;
  }
  
  /* 簡化時間軸容器 */
  .timeline-container {
    padding-left: 0 !important;
  }
  
  /* 簡化文章卡片為簡單列表樣式 */
  .timeline-post-card {
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    padding: 1rem !important;
    box-shadow: none !important;
  }
  
  /* 手機版文章標題字體調小 */
  .timeline-post-title,
  .timeline-post-title a {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  
  /* 手機版文章摘要字體調小 */
  .timeline-post-summary {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  /* 手機版分類標籤字體調小 */
  .timeline-post-category {
    font-size: 0.7rem !important;
  }
  
  /* 手機版標籤字體調小 */
  .timeline-tag {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  
  /* 簡化文章內容布局 */
  .timeline-post-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 1rem !important;
  }
  
  /* 隱藏縮圖在手機版 */
  .timeline-post-thumbnail {
    display: none !important;
  }
  
  /* 調整文章元數據區域布局 */
  .timeline-post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    flex-wrap: wrap !important;
  }
  
  /* 調整日期顯示 - 使用普通字體，放在閱讀時間左邊 */
  .timeline-post-date {
    display: inline-block !important;
    background: none !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    order: 1 !important;
    margin-right: 0.5rem !important;
  }
  
  .timeline-post-date .month,
  .timeline-post-date .day {
    display: inline !important;
  }
  
  .timeline-post-date .day::before {
    content: " ";
  }
  
  /* 閱讀時間樣式 */
  .timeline-post-reading-time {
    order: 2 !important;
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
  }
  
  /* 簡化年份標題 */
  .timeline-year-header {
    background: var(--bg-secondary) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  .timeline-year {
    margin: 0 !important;
    font-size: 1.3rem !important;
  }
  
  .timeline-year-count {
    font-size: 0.8rem !important;
  }
  
  /* 隱藏箭頭指示器 */
  .timeline-post-arrow {
    display: none !important;
  }
}

/* 觸摸友好的按鈕和鏈接優化 */
@media (max-width: 768px) {
  /* 最小觸摸目標尺寸 44px x 44px (Apple推薦) */
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .read-more,
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
  }
  
  .email-input-group button {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .contact-link {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* 增加間距以改善觸摸體驗 */
  .post-meta {
    gap: 1rem;
  }
  
  .post-tags {
    gap: 0.75rem;
  }
  
  .tag {
    min-height: 32px;
    padding: 0.5rem 0.75rem;
    touch-action: manipulation;
  }
}

/* 手機上的文字可讀性優化 */
@media (max-width: 768px) {
  /* 增加行高以改善可讀性 */
  .post-summary {
    line-height: 1.6;
  }
  
  .post-content-single p {
    line-height: 1.8 !important;
  }
  
  .timeline-post-summary {
    line-height: 1.6 !important;
  }
  
  /* 修復長URL溢出問題 */
  .post-content-single a,
  .post-content-single p,
  .post-content-single li,
  .post-content-single div {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* 特別處理長鏈接 */
  .post-content-single a[href] {
    max-width: 100% !important;
    display: inline-block !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
  
  /* 確保容器不被內容撐開 */
  .post-content-single {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .single-post {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* 段落間距優化 */
  .post-content-single p {
    margin-bottom: 1.75rem !important;
  }
  
  .post-content-single h1 {
    margin: 2.75rem 0 1.5rem 0 !important;
  }
  
  .post-content-single h2 {
    margin: 2.5rem 0 1.25rem 0 !important;
  }
  
  .post-content-single h3 {
    margin: 2rem 0 1rem 0 !important;
  }
  
  .post-content-single h4 {
    margin: 1.75rem 0 0.75rem 0 !important;
  }
}

/* 手機上的圖片優化 */
@media (max-width: 768px) {
  /* 基本圖片樣式 */
  .post-image img,
  .timeline-post-thumbnail img {
    border-radius: 8px;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* 封面圖片 */
  .post-cover-image img {
    height: 200px !important;
    object-position: center;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* 文章內容圖片 - 完全居中並防止溢出 */
  .post-content-single img {
    max-width: calc(100vw - 2rem) !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
  }
  
  /* 確保圖片容器也不會溢出 */
  .post-content-single p img,
  .post-content-single div img,
  .post-content-single figure img {
    max-width: calc(100vw - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 特殊處理figure元素 */
  .post-content-single figure {
    max-width: calc(100vw - 2rem) !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  
  /* 圖片說明文字 */
  .post-content-single figcaption {
    text-align: center !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    margin-top: 0.5rem !important;
    padding: 0 1rem !important;
  }
  
  /* Hugo shortcode 圖片 */
  .post-content-single .img-container {
    max-width: calc(100vw - 2rem) !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    overflow: hidden !important;
  }
}

/* 手機上的代碼塊優化 */
@media (max-width: 768px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="light"] .post-content-single code:not(pre code),
  :root[data-theme="dark"] .post-content-single code:not(pre code) {
    font-size: 12px !important;
    word-break: break-word;
  }
}

/* 手機上的表單優化 */
@media (max-width: 768px) {
  .email-input-group input {
    font-size: 16px; /* 防止iOS縮放 */
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .email-input-group {
    flex-direction: column;
    gap: 1rem;
  }
  
  .email-input-group button {
    width: 100%;
    font-size: 16px;
  }
}

/* 手機上的滾動優化 */
@media (max-width: 768px) {
  /* 平滑滾動 */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
  }
  
  /* 防止橫向滾動 */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* 針對文字內容元素處理長內容 */
  p, li, div, span, article, section {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* 特別處理所有鏈接 */
  a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
  
  /* 確保所有內容容器不溢出 */
  .all-posts-container,
  .timeline-container,
  .homepage-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* 提升滾動性能 - 移除可能造成問題的transform */
  .timeline-container,
  .posts-grid,
  .post-content-single {
    will-change: auto;
  }
}

/* 手機上的互動反饋優化 */
@media (max-width: 768px) {
  /* 點擊反饋效果 */
  .post-card:active,
  .timeline-post-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .theme-toggle:active {
    transform: scale(0.95);
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: translateY(1px) scale(0.98);
  }
  
  /* 移除hover效果以避免在觸摸設備上的問題 */
  @media (hover: none) and (pointer: coarse) {
    .post-card:hover,
    .timeline-post-card:hover,
    .timeline-post-main:hover,
    .timeline-post-thumbnail:hover {
      transform: none !important;
      background: inherit !important;
      box-shadow: inherit !important;
    }
    
    .post-image img:hover {
      transform: none !important;
    }
    
    .theme-toggle:hover {
      transform: none !important;
      background: inherit !important;
      border-color: inherit !important;
      color: inherit !important;
    }
  }
}

/* 手機橫屏模式優化 */
@media (max-width: 768px) and (orientation: landscape) {
  .desktop-navbar {
    padding: 5px 0;
  }
  
  .desktop-navbar .flex-container {
    padding: 5px 15px;
    min-height: 36px;
  }
  
  .desktop-navbar .nav-avatar {
    width: 32px;
    height: 32px;
  }
  
  .desktop-navbar a {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
  
  body {
    padding-top: 50px;
  }
  
  .hero-section {
    padding: 2rem 0;
  }
  
  .hero-content h1 {
    font-size: 2.25rem;
  }
}

/* 可訪問性優化 */
@media (max-width: 768px) {
  /* 高對比度模式支持 */
  @media (prefers-contrast: high) {
    .post-card,
    .timeline-post-card {
      border: 2px solid var(--text-primary);
    }
    
    .theme-toggle,
    .btn-primary,
    .btn-secondary {
      border-width: 3px;
    }
  }
  
  /* 減少動畫偏好支持 */
  @media (prefers-reduced-motion: reduce) {
    .post-card,
    .timeline-post-card,
    .theme-toggle,
    .btn-primary,
    .btn-secondary {
      transition: none;
    }
    
    html {
      scroll-behavior: auto;
    }
  }
  
  /* 焦點可見性 */
  .theme-toggle:focus,
  .desktop-navbar a:focus,
  .mobile-menu-item:focus,
  .mobile-menu-button:focus,
  .post-title a:focus,
  .timeline-post-title a:focus,
  .read-more:focus,
  .btn-primary:focus,
  .btn-secondary:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* ==================== 手機模式亮色主題邊框移除 ==================== */

/* 手機模式下亮色主題移除自我介紹區塊邊框 */
@media (max-width: 768px) {
  :root[data-theme="light"] .intro-section {
    border: none !important;
    background: var(--bg-color) !important;
    border-radius: 0 !important;
    margin: -10px 0 1rem 0 !important;
    padding: 1.5rem 0.4rem !important;
  }
  
  /* 調小自我介紹標題文字 */
  :root[data-theme="light"] .intro-title {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* 手機模式下亮色主題移除文章卡片邊框樣式被合併到下方完整定義中 */
  
  /* 讓沒有邊框的區塊完全填滿寬度 */
  :root[data-theme="light"] .homepage-container {
    padding: 10px 0 !important;
  }
  
  :root[data-theme="light"] .posts-grid {
    margin: 0 !important;
  }
  
  /* 自我介紹內容填滿寬度且更緊湊 */
  :root[data-theme="light"] .intro-content {
    padding: 0 0.4rem !important;
    max-width: 100% !important;
  }
  
  /* 調整section標題間距 */
  :root[data-theme="light"] .section-title {
    margin-bottom: 1rem !important;
    font-size: 1.6rem !important;
  }
  
  /* 隱藏手機模式下的四個標籤 */
  :root[data-theme="light"] .intro-tags {
    display: none !important;
  }
  
  /* 修復自我介紹文字間距不等寬問題 */
  :root[data-theme="light"] .intro-description {
    text-align: center !important;
    text-align-last: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }
  
  /* 手機模式下文章內容字體調小且更緊湊 */
  :root[data-theme="light"] .post-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="light"] .post-summary {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="light"] .post-meta {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="light"] .post-category {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
  }
  
  :root[data-theme="light"] .post-date {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="light"] .post-author {
    font-size: 0.75rem !important;
  }
  
  :root[data-theme="light"] .reading-time {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="light"] .read-more {
    font-size: 0.75rem !important;
  }
  
  /* 移除標籤 */
  :root[data-theme="light"] .post-tags {
    display: none !important;
  }
  
  /* 更寬更緊湊的版面 */
  :root[data-theme="light"] .posts-grid {
    margin: 0 0.2rem !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .post-content {
    padding: 0.4rem 0.4rem !important;
  }
  
  /* 調整文章footer間距 */
  :root[data-theme="light"] .post-footer {
    padding-top: 0.4rem !important;
    margin-top: 0.3rem !important;
  }
  
  /* 每篇文章用版權信息樣式的線條分開，更緊湊 */
  :root[data-theme="light"] .post-card {
    background: var(--bg-color) !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    padding-bottom: 0.5rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  }
  
  :root[data-theme="light"] .post-card:hover {
    box-shadow: none !important;
    background: var(--bg-color) !important;
  }
  
  :root[data-theme="light"] .post-card:last-child {
    border-bottom: none !important;
    border-image: none !important;
  }
  
  /* 圖片下方圓角，跟上方一樣，調整高度更緊湊 */
  :root[data-theme="light"] .post-image {
    height: 150px !important;
    border-radius: 12px 12px 12px 12px !important;
    overflow: hidden !important;
  }
  
  :root[data-theme="light"] .post-image img {
    border-radius: 12px !important;
  }
  
  /* 手機模式下聯絡資訊區塊置中 */
  :root[data-theme="light"] .footer-contact-info {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  /* Email subscription文字樣式優化 */
  :root[data-theme="light"] .email-subscription p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
    margin-bottom: 0.8rem !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
  }
  
  /* 手機模式下footer雙欄布局改為單欄並置中 */
  :root[data-theme="light"] .footer-dual-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* 手機模式下email subscription橫向布局 */
  :root[data-theme="light"] .email-subscription .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .email-input-group input {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    flex: 1 !important;
  }
  
  :root[data-theme="light"] .email-input-group button {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    padding: 0.875rem 1rem !important;
  }
  
  /* ==================== 手機模式暗色主題樣式（與亮色模式相同） ==================== */
  
  /* 手機模式下暗色主題移除自我介紹區塊邊框，設為深灰色背景 */
  :root[data-theme="dark"] .intro-section {
    border: none !important;
    background: var(--bg-secondary) !important;
    border-radius: 0 !important;
    margin: -10px 0 1rem 0 !important;
    padding: 1.5rem 0.4rem !important;
  }
  
  /* 調小自我介紹標題文字 */
  :root[data-theme="dark"] .intro-title {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* 讓沒有邊框的區塊完全填滿寬度 */
  :root[data-theme="dark"] .homepage-container {
    padding: 10px 0 !important;
  }
  
  :root[data-theme="dark"] .posts-grid {
    margin: 0 !important;
  }
  
  /* 自我介紹內容填滿寬度且更緊湊 */
  :root[data-theme="dark"] .intro-content {
    padding: 0 0.4rem !important;
    max-width: 100% !important;
  }
  
  /* 調整section標題間距 */
  :root[data-theme="dark"] .section-title {
    margin-bottom: 1rem !important;
    font-size: 1.6rem !important;
  }
  
  /* 隱藏手機模式下的四個標籤 */
  :root[data-theme="dark"] .intro-tags {
    display: none !important;
  }
  
  /* 修復自我介紹文字間距不等寬問題 */
  :root[data-theme="dark"] .intro-description {
    text-align: center !important;
    text-align-last: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }
  
  /* 手機模式下文章內容字體調小且更緊湊 */
  :root[data-theme="dark"] .post-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="dark"] .post-summary {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="dark"] .post-meta {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="dark"] .post-category {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
  }
  
  :root[data-theme="dark"] .post-date {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="dark"] .post-author {
    font-size: 0.75rem !important;
  }
  
  :root[data-theme="dark"] .reading-time {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="dark"] .read-more {
    font-size: 0.75rem !important;
  }
  
  /* 移除標籤 */
  :root[data-theme="dark"] .post-tags {
    display: none !important;
  }
  
  /* 更寬更緊湊的版面 */
  :root[data-theme="dark"] .posts-grid {
    margin: 0 0.2rem !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .post-content {
    padding: 0.4rem 0.4rem !important;
  }
  
  /* 調整文章footer間距 */
  :root[data-theme="dark"] .post-footer {
    padding-top: 0.4rem !important;
    margin-top: 0.3rem !important;
  }
  
  /* 每篇文章用版權信息樣式的線條分開，更緊湊，深灰色背景 */
  :root[data-theme="dark"] .post-card {
    background: var(--bg-secondary) !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    padding-bottom: 0.5rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  }
  
  :root[data-theme="dark"] .post-card:hover {
    box-shadow: none !important;
    background: var(--bg-secondary) !important;
  }
  
  :root[data-theme="dark"] .post-card:last-child {
    border-bottom: none !important;
    border-image: none !important;
  }
  
  /* 圖片下方圓角，跟上方一樣，調整高度更緊湊 */
  :root[data-theme="dark"] .post-image {
    height: 150px !important;
    border-radius: 12px 12px 12px 12px !important;
    overflow: hidden !important;
  }
  
  :root[data-theme="dark"] .post-image img {
    border-radius: 12px !important;
  }
  
  /* 手機模式下聯絡資訊區塊置中 */
  :root[data-theme="dark"] .footer-contact-info {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  /* Email subscription文字樣式優化 */
  :root[data-theme="dark"] .email-subscription p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
    margin-bottom: 0.8rem !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
  }
  
  /* 手機模式下footer雙欄布局改為單欄並置中 */
  :root[data-theme="dark"] .footer-dual-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* 手機模式下email subscription橫向布局 */
  :root[data-theme="dark"] .email-subscription .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .email-input-group input {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    flex: 1 !important;
  }
  
  :root[data-theme="dark"] .email-input-group button {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    padding: 0.875rem 1rem !important;
  }
}

/* ==================== 手機版/電腦版導航欄顯示控制 ==================== */

/* 預設：顯示電腦版，隱藏手機版 */
.desktop-navbar {
  display: block;
}

.mobile-navbar {
  display: none;
}

/* 手機版：隱藏電腦版，顯示手機版 */
@media (max-width: 768px) {
  .desktop-navbar {
    display: none !important;
  }
  
  .mobile-navbar {
    display: block !important;
  }
  
  .mobile-navbar .flex-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    min-height: 60px !important;
    height: 60px !important;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  body {
    padding-top: 84px; /* 調整為手機版導航欄高度 */
  }
}

/* ==================== 手機版導航欄樣式 ==================== */

/* 手機版頭像樣式 */
.mobile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mobile-nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.mobile-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-nav-avatar-fallback {
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.mobile-nav-avatar-fallback svg {
  width: 24px;
  height: 24px;
  color: var(--text-inverse);
}

.mobile-avatar a:hover .mobile-nav-avatar {
  transform: scale(1.1);
}

/* 手機版菜單容器 */
.mobile-menu-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 三個點菜單按鈕 */
.mobile-menu-button {
  background: none;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  padding: 0;
  color: var(--text-primary);
}

.mobile-menu-button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
  transform: scale(1.05);
}

.mobile-menu-button:active {
  transform: scale(0.95);
}

.mobile-menu-button svg {
  width: 20px;
  height: 20px;
}

/* 下拉菜單樣式 */
.mobile-dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
  width: 80vw !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  text-align: center;
}
.mobile-dropdown-menu .mobile-menu-item {
  justify-content: center !important;
  text-align: center !important;
}
.mobile-dropdown-menu .mobile-theme-toggle {
  justify-content: center !important;
}

.mobile-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mobile-menu-items {
  padding: 8px 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: 
    background-color 0.2s ease,
    color 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-menu-item:hover {
  background: var(--primary-color);
  color: var(--text-inverse);
}

.mobile-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-menu-separator {
  height: 1px;
  background: var(--border-color);
  margin: 8px 16px;
}

/* 手機版主題切換按鈕 */
.mobile-theme-toggle {
  justify-content: flex-start;
}

.mobile-theme-toggle:hover svg {
  transform: rotate(180deg);
}

/* 深色模式下的手機版樣式 */
:root[data-theme="dark"] .mobile-menu-button {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

:root[data-theme="dark"] .mobile-menu-button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
}

:root[data-theme="dark"] .mobile-dropdown-menu {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
}

:root[data-theme="dark"] .mobile-menu-item {
  color: #ffffff !important;
}

:root[data-theme="dark"] .mobile-menu-item:hover {
  background: var(--primary-color);
  color: var(--text-inverse) !important;
}

:root[data-theme="dark"] .mobile-menu-separator {
  background: var(--border-color);
}

/* 超小屏幕調整 */
@media (max-width: 480px) {
  .desktop-navbar .logo {
    font-size: 1.2rem;
  }
  
  .desktop-navbar .logo-text {
    display: none;
  }
  
  .desktop-navbar .nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .desktop-navbar a {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  
  /* 手機版調整 */
  .mobile-navbar .flex-container {
    padding: 10px 15px;
    min-height: 56px;
    height: 56px !important;
  }
  
  .mobile-nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .mobile-menu-button {
    width: 36px;
    height: 36px;
  }
  
  .mobile-menu-button svg {
    width: 18px;
    height: 18px;
  }
  
  .mobile-dropdown-menu {
    min-width: 180px;
    right: -10px;
  }
  
  .mobile-menu-item {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
  
  .mobile-menu-item svg {
    width: 16px;
    height: 16px;
  }
  
  body {
    padding-top: 76px; /* 調整為超小屏手機版導航欄高度 */
  }
}

/* 手機版導航欄高度加大 */
@media (max-width: 768px) {
  .mobile-navbar .flex-container {
    min-height: 72px !important;
    height: 72px !important;
    padding: 16px 24px !important;
  }
}
@media (max-width: 480px) {
  .mobile-navbar .flex-container {
    min-height: 64px !important;
    height: 64px !important;
    padding: 10px 12px !important;
  }
}

/* 手機版頭像放大並向上移動 */
.mobile-avatar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  margin-top: -6px;
}
.mobile-nav-avatar {
  width: 52px;
  height: 52px;
}
@media (max-width: 480px) {
  .mobile-nav-avatar {
    width: 44px;
    height: 44px;
  }
}

/* 菜單按鈕去除圓形邊框，三個點變大 */
.mobile-menu-button {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-button svg {
  width: 32px !important;
  height: 32px !important;
}
@media (max-width: 480px) {
  .mobile-menu-button svg {
    width: 26px !important;
    height: 26px !important;
  }
}

.mobile-theme-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 亮色模式下下拉菜單頂部背景為白色 */
:root[data-theme="light"] .mobile-dropdown-menu {
  background: #fff !important;
}
:root[data-theme="light"] .mobile-dropdown-menu > * {
  background: transparent !important;
}

/* 移除三個點菜單按鈕的藍色外框 */
.mobile-menu-button:focus,
.mobile-menu-button:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .mobile-dropdown-menu,
:root[data-theme="light"] .mobile-dropdown-menu * {
  color: #222 !important;
  fill: #222 !important;
  stroke: #222 !important;
  background: #fff !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .mobile-dropdown-menu svg {
  color: #222 !important;
  fill: #222 !important;
  stroke: #222 !important;
}

:root[data-theme="light"] .mobile-dropdown-menu {
  border: 2px solid #2196f3 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 24px 0 rgba(33,150,243,0.08);
  overflow: visible !important;
}

:root[data-theme="light"] .mobile-dropdown-menu * {
  background: none !important;
}

:root[data-theme="light"] .mobile-menu-divider,
:root[data-theme="light"] .mobile-dropdown-menu hr {
  border: none;
  border-top: 1px solid #e0e0e0 !important;
  margin: 12px 0;
  display: block !important;
}

/* 亮色模式只顯示太陽，暗色模式只顯示月亮 */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline; }
:root[data-theme="light"] .theme-icon-sun { display: inline !important; }
:root[data-theme="light"] .theme-icon-moon { display: none !important; }

:root[data-theme="light"] .mobile-menu-divider {
  display: none !important;
}

.mobile-dropdown-menu {
  min-width: 0 !important;
  max-width: 220px !important;
  width: 80vw !important;
  margin: 0 auto !important;
  left: 80% !important;
  text-align: center;
  min-width: 180px;
  max-width: 220px;
  width: 80vw;
  margin: 0 auto;
}
.mobile-dropdown-menu .mobile-menu-item {
  justify-content: center !important;
  text-align: center !important;
}
.mobile-dropdown-menu .mobile-theme-toggle {
  justify-content: center !important;
}

.mobile-dropdown-menu {
  position: fixed !important;
  left: 50% !important;
  top: 90px !important;
  transform: translateX(-50%) !important;
  width: 90vw !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

/* ========= 最終覆蓋：手機下拉菜單固定靠右 ========= */
.mobile-dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 10px) !important;
  transform: none !important;
}

/* 手機下拉菜單顯示/隱藏控制 */
.mobile-dropdown-menu {
  display: none !important;
}
.mobile-dropdown-menu.active {
  display: block !important;
}

/* 暗色模式：手機下拉菜單同樣藍色圓角邊框 */
:root[data-theme="dark"] .mobile-dropdown-menu {
  border: 2px solid #2196f3 !important;
  border-radius: 16px !important;
  background: var(--bg-secondary) !important; /* 仍用深色背景 */
  box-shadow: 0 4px 24px 0 rgba(33,150,243,0.08);
}

/* 移除下拉菜單項目的 hover 藍色背景 */
.mobile-dropdown-menu .mobile-menu-item:hover {
  background: none !important;
  color: inherit !important;
}

.contact-social-icons {
  margin-top: 2.2rem !important;
}

/* ====== 調整 About 頁面底部社群圖示整體位置 ====== */
.footer-contact-info {
  margin-top: 1.6rem !important; /* 直接推整個容器，避免被 flex 垂直置中抵消 */
}

/* ===== 手機版導航列微調 - 置於檔尾確保最高優先 ===== */
/* 1. 頭像與菜單鍵略為內縮，避免貼邊 */
.mobile-avatar{ margin-left:8px !important; }
.mobile-menu-container{ margin-right:8px !important; }

/* 2. 亮色模式：active/focus 狀態保持可見（避免白底白圖示） */
:root[data-theme="light"] .mobile-menu-button:active,
:root[data-theme="light"] .mobile-menu-button:focus{
  background:none !important;
  color:#222 !important;
}

/* 3. 暗色模式：選單項 hover 背景使用主色，文字/圖示保持反差 */
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:hover{
  background:var(--primary-color) !important;
  color:var(--text-inverse) !important;
}

/* 4. 擴大點擊區域 - 增加上下內距 */
.mobile-dropdown-menu .mobile-menu-item{
  padding:14px 20px !important;
}

/* === 修正：暗色模式 hover 保持原色 === */
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:hover,
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:active {
  background: none !important;
  color: inherit !important;
}

/* === 亮色模式：三點按鈕 hover/active/ focus 維持原色，不變白 === */
:root[data-theme="light"] .mobile-menu-button:hover,
:root[data-theme="light"] .mobile-menu-button:active,
:root[data-theme="light"] .mobile-menu-button:focus {
  background: none !important;
  color: #222 !important;
}

/* === 手機版導航列向下滑隱藏，向上滑顯示 === */
.mobile-navbar {
  transition: transform 0.25s ease-in-out !important;
}
.mobile-navbar.nav-hidden {
  transform: translateY(-100%) !important;
}

/* === 手機版：縮短 Stay Updated 與聯絡資訊之間的距離 === */
@media (max-width: 768px) {
  .footer-contact-info {
    margin-top: 0.2rem !important; /* 原 1.6rem */
  }
  .contact-social-icons {
    margin-top: 0.3rem !important; /* 原 2.2rem */
    margin-bottom: 0.3rem !important; /* 視覺再近一點 */
  }
}

/* === 修正：讓首頁最後一篇文章與 Stay Updated 區塊保持距離 === */
:root[data-theme="light"] .posts-grid,
:root[data-theme="dark"]  .posts-grid {
  margin-bottom: 0rem !important;  /* 充分留白，避免區塊遮蓋 */
}

/* === 再覆蓋一次（含亮／暗主題），確保 Join 按鈕尺寸生效 === */
:root[data-theme="light"] .email-subscription.with-separator .email-input-group button,
:root[data-theme="dark"]  .email-subscription.with-separator .email-input-group button {
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
}