html:not(.dark) header {
  background-color: #F7F6EE !important; /* 百合白 Lily */
  color: #1f2937 !important;
}

/* 全局字體設定 */
* {
  font-family: 'Chiron GoRound TC', 'Noto Sans TC', sans-serif;
}

/* 保留等寬字體用於程式碼 */
code, pre, kbd, samp {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

/* index.html 內嵌樣式移植 */
pre {
  position: relative;
  background: #282c34;
  border-radius: 0.5rem;
  margin: 1rem 0;
  padding: 1rem;
  overflow-x: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #3e4451;
}
/* ---- Copy Code Button ---- */
pre .copy-code-btn {
  position: absolute;
  top: 6px;
  right: 70px; /* 往左移避開語言標籤 */
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
/* 沒有語言標籤時靠右 */
pre:not([data-language]) .copy-code-btn {
  right: 6px;
}
pre:hover .copy-code-btn { opacity: 1; }
html:not(.dark) pre .copy-code-btn { background: rgba(0,0,0,0.55); }
html.dark pre .copy-code-btn { background: rgba(255,255,255,0.12); }
pre .copy-code-btn:hover { background: rgba(0,0,0,0.75); }
html.dark pre .copy-code-btn:hover { background: rgba(255,255,255,0.25); }
pre .copy-code-btn.copied {
  background: #16a34a !important;
  color: #fff;
}
pre .copy-code-btn svg { width: 14px; height: 14px; }
pre[data-language] { padding-top: 2rem; }
/* 小螢幕上也總是顯示 */
@media (max-width: 640px) {
  pre .copy-code-btn { opacity: 1; }
}
pre code {
  background: transparent !important;
  padding: 0 !important;
  white-space: pre;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #abb2bf !important;
}
pre code .hljs-keyword,
pre code .keyword {
  color: #c678dd !important;
}
pre code .hljs-string,
pre code .string {
  color: #98c379 !important;
}
pre code .hljs-number,
pre code .number {
  color: #d19a66 !important;
}
pre code .hljs-comment,
pre code .comment {
  color: #5c6370 !important;
  font-style: italic;
}
pre code .hljs-function,
pre code .function {
  color: #61afef !important;
}
html:not(.dark) pre {
  background: #FAF9F6; /* 象牙白 Ivory */
  border: 1px solid #eceae3;
}
html:not(.dark) pre code {
  color: #383a42 !important;
}
.dark pre {
  background: #1a1d24;
  border: 1px solid #3b4252;
}
pre code .line-number {
  display: inline-block;
  width: 2rem;
  color: #636d83;
  text-align: right;
  margin-right: 0.5rem;
  user-select: none;
}
pre::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  background: #4a5568;
  color: white;
  border-bottom-left-radius: 0.25rem;
  opacity: 0.8;
  font-family: sans-serif;
  text-transform: uppercase;
}
.hljs {
  display: block;
  overflow-x: auto;
  background: transparent !important;
}
.theme-text-primary {
  transition: color 0.3s ease;
}
.theme-text-secondary {
  transition: color 0.3s ease;
}
.theme-brand-primary {
  transition: color 0.3s ease;
}
.theme-bg-primary {
  transition: background-color 0.3s ease;
}
.theme-icon {
  transition: color 0.3s ease;
}
/* Custom styles to extend Tailwind */

/* Font settings */

html {
  transition: background-color 0.5s ease, color 0.5s ease;
  background-color: #FAF9F6; /* 溫暖象牙白 */
  font-family: 'Chiron GoRound TC', 'Noto Sans TC', sans-serif;
}

body {
  font-family: 'Chiron GoRound TC', 'Noto Sans TC', sans-serif;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
  scroll-padding-top: 80px; /* 確保錨點連結不被頭部遮擋 */
  background-color: #FAF9F6; /* 溫暖象牙白 */
}

/* Font Awesome icons styling */
.fas, .far, .fab, .fa {
  vertical-align: middle;
}

/* Animation for icons */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(-180deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* 暗黑模式全局樣式覆蓋 */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #111827; /* dark:bg-gray-900 */
  color: #f9fafb; /* dark:text-gray-50 */
}


/* 明亮模式下 header 樣式 */
header {
  background-color: #F7F6EE; /* 百合白 Lily */
  color: #1f2937;
  transition: background-color 0.5s, color 0.5s;
}

html.dark header {
  background-color: #1f2937 !important; /* dark:bg-gray-800 */
  color: #f9fafb !important; /* dark:text-gray-50 */
}

/* 暗黑模式下 header 樣式 */
html.dark header {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f9fafb; /* dark:text-gray-50 */
}


/* 明亮模式內容容器、側邊欄背景色調整為溫暖白 */
html:not(.dark) #contentContainer {
  background-color: #FAF9F6;
}
html:not(.dark) #sidebar {
  background-color: #F7F6EE;
  border-color: #eceae3;
}

/* 暗黑模式下的側邊欄樣式 */
html.dark #sidebar {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f9fafb; /* dark:text-gray-50 */
  border-color: #374151; /* dark:border-gray-700 */
}

/* 新主題系統 - 主題相關元素樣式 */
.theme-brand-primary {
  color: var(--brand-primary, #2563EB);
}

.theme-dept-name {
  color: var(--dept-name, #4B5563);
}

html.dark .theme-dept-name {
  color: var(--dept-name-dark, #FEF08A);
}

.theme-icon {
  color: var(--icon-color, #2563EB);
}

html.dark .theme-icon {
  color: var(--icon-color-dark, #FDE68A);
}

.theme-footer-highlight {
  color: var(--footer-highlight, #2563EB);
}

html.dark .theme-footer-highlight {
  color: var(--footer-highlight-dark, #FEF08A);
}

.theme-footer-text {
  color: var(--footer-text, #4B5563);
}

html.dark .theme-footer-text {
  color: var(--footer-text-dark, #FFFFFF);
}

/* 暗黑模式切換按鈕樣式 - Material Icons 版 */
#darkModeToggle {
  transition: all 0.25s ease;
  transform: scale(1);
  overflow: visible;
  min-width: 26px; /* 原 50px 約 52% */
  min-height: 26px; /* 同步縮小 */
  padding: 4px; /* 新增內距避免太擠 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

#darkModeToggle i.fas {
  font-size: 1.25rem; /* 原 text-4xl 約 2.25rem -> 降至 ~55% */
}

#darkModeToggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 6px rgba(79, 70, 229, 0.35);
  background-color: rgba(229, 231, 235, 0.45); /* 淺灰背景 (稍淡) */
}

#darkModeToggle:active {
  transform: scale(0.92);
}

html.dark #darkModeToggle {
  box-shadow: 0 0 8px rgba(236, 201, 75, 0.25);
}

html.dark #darkModeToggle:hover {
  background-color: rgba(55, 65, 81, 0.45); /* 暗色背景 (稍淡) */
}

/* 修正主題切換圖示顯示 */
.moon-icon, .sun-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
html:not(.dark) .moon-icon {
  display: flex;
}
html.dark .sun-icon {
  display: flex;
}

/* 暗黑模式下的特殊樣式調整 */
html.dark .prose-dark {
  color: #e5e7eb;
}

/* 暗黑模式下的內容容器 */
html.dark #contentContainer {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f3f4f6; /* dark:text-gray-100 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式下的標題和段落 - 增強對比度 */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
  color: #ffffff; /* 純白色增強標題對比度 */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.2); /* 輕微陰影增強可讀性 */
}

html.dark p {
  color: #f9fafb; /* dark:text-gray-50 - 更高對比的段落文字 */
}

/* 暗黑模式下的連結 - 增強對比度 */
html.dark a {
  color: #93c5fd; /* blue-300 - 更亮的藍色 */
  font-weight: 500; /* 稍微加粗 */
}

html.dark a:hover {
  color: #dbeafe; /* blue-100 - 更亮的懸停顏色 */
  text-decoration: underline; /* 加下劃線提高識別度 */
}

/* Layout settings */
.sidebar-footer {
  font-size: 0.8rem;
  line-height: 1.4;
}

/* 側邊欄 footer 暗黑模式樣式 - 增強對比度 */
html.dark .sidebar-footer {
  border-color: #4b5563 !important; /* dark:border-gray-600 - 增加邊界對比 */
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f3f4f6 !important; /* 更亮的文字顏色 */
}

html.dark .sidebar-footer a {
  color: #93c5fd !important; /* blue-300 - 更亮的藍色 */
  font-weight: 500; /* 加粗以提高可讀性 */
}

html.dark .sidebar-footer a:hover {
  color: #dbeafe !important; /* blue-100 - 更亮的懸停顏色 */
  text-decoration: underline; /* 添加下劃線增強可識別性 */
}

/* Ensure main content fills available height */
main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4rem); /* 4rem is approx header height */
}

#contentContainer {
  flex-grow: 1;
  overflow-y: auto;
}

/* Dark mode prose styling */
.prose-dark h1,
.prose-dark h2, 
.prose-dark h3,
.prose-dark h4,
.prose-dark h5,
.prose-dark h6,
.prose-dark strong {
  color: #f3f4f6;
}

.prose-dark a {
  color: #60a5fa;
}

.prose-dark p,
.prose-dark ul,
.prose-dark ol,
.prose-dark blockquote {
  color: #d1d5db;
}

.prose-dark code {
  color: #f9a8d4;
  background-color: #1f2937;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}

.prose-dark pre {
  background-color: #1f2937;
  color: #f3f4f6;
}

/* TOC tree styling */
.toc-item {
  margin-bottom: 0.25rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

.toc-toggle:hover {
  background-color: rgba(156, 163, 175, 0.1);
}

.toc-link {
  display: inline-block;
  padding: 0.25rem 0;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  color: #4b5563;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

/* 為沒有文件的目錄標題添加特殊樣式 */
.toc-link:not([data-file]) {
  cursor: pointer;
  position: relative;
  font-weight: 500;
}

/* 目錄項目樣式 */
.toc-item {
  transition: all 0.2s ease;
}

.toc-item:hover {
  background-color: rgba(156, 163, 175, 0.1);
  border-radius: 0.25rem;
}

html.dark .toc-item:hover {
  background-color: rgba(191, 219, 254, 0.15); /* 藍色調背景增強懸停效果識別度 */
  border-left: 2px solid #60a5fa; /* 添加藍色邊框增加視覺效果 */
  padding-left: 2px; /* 補償邊框 */
}

/* 滑鼠懸停時顯示提示效果 */
.toc-link:not([data-file]):hover {
  color: #3b82f6; /* blue-500 */
  border-radius: 0.25rem;
  padding-left: 0.25rem;
  margin-left: -0.25rem;
}

html.dark .toc-link:not([data-file]):hover {
  color: #60a5fa !important; /* blue-400 */
}

html.dark .toc-link {
  color: #dbeafe !important; /* blue-100 - 更高對比度 */
}

.toc-link:hover {
  color: #2563eb;
}

html.dark .toc-link:hover {
  color: #93c5fd !important; /* blue-300 - 更鮮明的懸停顏色 */
  text-shadow: 0 0 1px rgba(219, 234, 254, 0.3); /* 輕微文字陰影增強識別度 */
}

.toc-link.active {
  color: #2563eb;
  font-weight: 600; /* 加粗 */
}

html.dark .toc-link.active {
  color: #bfdbfe !important; /* blue-200 - 更鮮明的活動顏色 */
  font-weight: 600; /* 加粗增強可讀性 */
}

.toc-children {
  padding-left: 1.5rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  width: 100%;
}

.toc-children.expanded {
  max-height: 5000px;
  transition: max-height 0.5s ease-in;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #sidebar.active {
    transform: translateX(0);
  }
}

/* Code block syntax highlighting */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: #f8f8f8;
  border-radius: 0.5rem;
}

/* 暗黑模式下的代碼塊樣式 */
html.dark .hljs {
  background: #111827; /* dark:bg-gray-900 */
  color: #f9fafb; /* dark:text-gray-50 */
}

/* 確保暗黑模式下的其他元素樣式 */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #374151; /* dark:bg-gray-700 */
  color: #f9fafb; /* dark:text-gray-50 */
  border-color: #4b5563; /* dark:border-gray-600 */
}

.dark .hljs {
  background: #1f2937;
}

/* Table styles */
.prose table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 支援自訂欄位寬度的表格 */
.prose table.custom-table {
  table-layout: fixed;
}

/* 表格寬度控制輔助類別 */
.prose table[data-column-widths] {
  table-layout: fixed;
}

.prose table th,
.prose table td {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dark .prose table th,
.dark .prose table td {
  border-color: #374151;
}

.prose table th {
  background-color: #f3f4f6;
  font-weight: 600;
}

.dark .prose table th {
  background-color: #374151;
}

/* Progress indicator for content load */
.load-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #2563eb;
  z-index: 20;
  transition: width 0.2s ease-out;
}

.dark .load-progress {
  background-color: #3b82f6;
}

/* Enhanced Heading Styles for better hierarchy visualization */
.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #4b5563;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.prose h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.prose h6 {
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Dark mode heading styles */
.dark .prose h1 {
  color: #f3f4f6;
  border-bottom-color: #374151;
}

.dark .prose h2 {
  color: #e5e7eb;
  border-bottom-color: #374151;
}

.dark .prose h3 {
  color: #d1d5db;
}

.dark .prose h4 {
  color: #9ca3af;
}

.dark .prose h5,
.dark .prose h6 {
  color: #6b7280;
}

/* Animation for content transitions */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.content-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* YouTube 響應式嵌入樣式 */
.youtube-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 寬高比 */
  margin: 1.5rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background: #000;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.5rem;
}

/* 小螢幕優化 */
@media (max-width: 640px) {
  .youtube-container {
    margin: 1rem 0;
    border-radius: 0.375rem;
  }
  
  .youtube-container iframe {
    border-radius: 0.375rem;
  }
}

/* 深色模式下的 YouTube 容器樣式 */
.dark .youtube-container {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* 錯誤訊息樣式 */
.youtube-error {
  padding: 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #dc2626;
  margin: 1rem 0;
}

.dark .youtube-error {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fecaca;
}

/* YouTube 進階狀態樣式 */
.youtube-container.youtube-lazy.youtube-offline,
.youtube-container.youtube-lazy.youtube-error-state {
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#eee;background:#111;position:relative;padding:.75rem;text-align:center;line-height:1.4;
}
.youtube-offline-msg a.yt-link { color:#3b82f6; text-decoration:underline; }
.youtube-fallback { font-size:.8rem; line-height:1.4; }
.youtube-fallback a { color:#3b82f6; text-decoration:underline; }
.yt-retry-btn { margin-left:.5rem; padding:2px 8px; font-size:.7rem; background:#2563eb; color:#fff; border-radius:4px; }
.yt-retry-btn:hover { background:#1d4ed8; }
.yt-click-mode:not(.youtube-loaded):hover .youtube-play-btn { box-shadow:0 0 0 4px rgba(255,255,255,.25); }
.youtube-container.youtube-lazy.youtube-offline .youtube-thumb { filter:grayscale(1) brightness(.4); }
.youtube-container.youtube-lazy.youtube-offline .youtube-play-btn { display:none; }

/* Lazy YouTube 進階樣式 */
.youtube-container.youtube-lazy {
  position: relative;
  cursor: pointer;
  background:#000;
  display:block;
}
.youtube-container.youtube-lazy .youtube-thumb {
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:filter .3s ease;filter:brightness(.85);
}
.youtube-container.youtube-lazy:hover .youtube-thumb {filter:brightness(1);}
.youtube-container.youtube-lazy .youtube-play-btn {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border:0;background:rgba(0,0,0,.6);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.youtube-container.youtube-lazy .youtube-play-btn:before {
  content:"";display:block;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid #fff;margin-left:4px;
}
.youtube-container.youtube-lazy .youtube-badge {
  position:absolute;bottom:6px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;letter-spacing:.5px;padding:2px 6px;border-radius:4px;font-weight:500;
}
.youtube-container.youtube-lazy.youtube-loaded {cursor:auto;}
.youtube-container.youtube-lazy.youtube-loaded .youtube-play-btn,.youtube-container.youtube-lazy.youtube-loaded .youtube-badge {display:none;}
.dark .youtube-container.youtube-lazy .youtube-play-btn {background:rgba(255,255,255,.15);} 
.dark .youtube-container.youtube-lazy .youtube-badge {background:rgba(255,255,255,.2);color:#eee;}

/* YouTube 尺寸變體 - 覆寫預設 100% 寬度行為 */
.youtube-container.yt-size-small {
  width: 480px;
  max-width: 100%; /* 響應式：小螢幕不超過螢幕寬 */
  margin-left: 0;
  margin-right: 0;
}
.youtube-container.yt-size-medium {
  width: 640px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.youtube-container.yt-size-large {
  width: 854px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.youtube-container.yt-size-full {
  width: 100%;
  max-width: 100%;
}
/* 自訂大小會透過 inline style 設定寬度 */
.youtube-container.yt-custom-size {
  margin-left: auto;
  margin-right: auto;
}

/* ── 側邊欄寬度調整（平板 +50px、桌機 +50px）────────────────── */
@media (min-width: 768px) {
  #sidebar {
    width: 306px; /* Tailwind md:w-64(256px) + 50px */
  }
  main {
    left: 306px;
  }
}

@media (min-width: 1024px) {
  #sidebar {
    width: 338px; /* Tailwind lg:w-72(288px) + 50px */
  }
  main {
    left: 338px;
  }
}