:root {
  --btn-bg: #2c3e50;
  --btn-fg: #ffffff;
  --btn-bg-hover: #1f2d3d;
}

body { margin: 0; }

/* 行動裝置圖片不跑版 */
.markdown-section img { max-width: 100%; height: auto; }

/* 工具列（樣式按鈕） */
.tools {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 9999;
}
.tools button {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.tools button:hover { background: var(--btn-bg-hover); }

/* 程式碼區塊在手機上可橫向捲動 */
pre { overflow: auto; -webkit-overflow-scrolling: touch; }

/* Mermaid 區塊背景透明 */
.markdown-section .mermaid { background: transparent; }

/* ===== 深色模式（Vue 主題 + 覆蓋） ===== */
html.dark-mode,
html.dark-mode body {
  background: #0f1115;
  color: #e6e6e6;
}

html.dark-mode .markdown-section { color: #e6e6e6; }
html.dark-mode a { color: #7aa2f7; }
html.dark-mode a:hover { color: #a6c0ff; }

html.dark-mode .sidebar {
  background: #11151c;
  color: #e6e6e6;
  border-right: 1px solid rgba(255,255,255,0.08);
}
html.dark-mode .sidebar a { color: #e6e6e6 !important; }
html.dark-mode .sidebar ul li.active > a { color: #7aa2f7; }

html.dark-mode input[type="search"],
html.dark-mode .search input {
  background: #0f1115;
  color: #e6e6e6;
  border: 1px solid rgba(255,255,255,0.14);
}
html.dark-mode .search input::placeholder { color: rgba(230,230,230,0.65); }

html.dark-mode .markdown-section h1,
html.dark-mode .markdown-section h2,
html.dark-mode .markdown-section h3 { color: #f2f2f2 !important; }
html.dark-mode .markdown-section strong { color: #ffffff !important; }

/* 表格強制暗底 */
html.dark-mode .markdown-section table,
html.dark-mode .markdown-section thead,
html.dark-mode .markdown-section tbody,
html.dark-mode .markdown-section tr,
html.dark-mode .markdown-section th,
html.dark-mode .markdown-section td {
  background: transparent !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.22) !important;
}
html.dark-mode .markdown-section thead tr { background: rgba(255,255,255,0.08) !important; }
html.dark-mode .markdown-section tbody tr:nth-child(even) { background: rgba(255,255,255,0.05) !important; }

html.dark-mode .sidebar-toggle {
  background: #11151c;
  border: 1px solid rgba(255,255,255,0.12);
}
html.dark-mode .sidebar-toggle .bar { background: rgba(255,255,255,0.85); }
html.dark-mode { --btn-bg: #2a3342; --btn-bg-hover: #202836; }

/* ===== GitHub Dark（偏紅） ===== */
html.gh-dark,
html.gh-dark body {
  background: #0d1117;
  color: #c9d1d9;
}
html.gh-dark .markdown-section { color: #c9d1d9; }
html.gh-dark a { color: #ff7b72; }
html.gh-dark a:hover { color: #ffa198; }

html.gh-dark .sidebar {
  background: #161b22;
  color: #c9d1d9;
  border-right: 1px solid #30363d;
}
html.gh-dark .sidebar a { color: #c9d1d9 !important; }
html.gh-dark .sidebar ul li.active > a { color: #ff7b72; }

html.gh-dark input[type="search"],
html.gh-dark .search input {
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid #30363d;
}
html.gh-dark .search input::placeholder { color: rgba(201,209,217,0.65); }

html.gh-dark .markdown-section h1,
html.gh-dark .markdown-section h2,
html.gh-dark .markdown-section h3 { color: #ff7b72 !important; }
html.gh-dark .markdown-section strong { color: #ffffff !important; }

/* 表格強制暗底 */
html.gh-dark .markdown-section table,
html.gh-dark .markdown-section thead,
html.gh-dark .markdown-section tbody,
html.gh-dark .markdown-section tr,
html.gh-dark .markdown-section th,
html.gh-dark .markdown-section td {
  background: transparent !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}
html.gh-dark .markdown-section thead tr { background: rgba(255,255,255,0.08) !important; }
html.gh-dark .markdown-section tbody tr:nth-child(even) { background: rgba(255,255,255,0.05) !important; }

html.gh-dark .sidebar-toggle {
  background: #161b22;
  border: 1px solid #30363d;
}
html.gh-dark .sidebar-toggle .bar { background: rgba(201,209,217,0.9); }
html.gh-dark { --btn-bg: #21262d; --btn-bg-hover: #30363d; }

/* Sidebar Logo：透明也清楚（白底卡片） */
html.dark-mode .sidebar .app-name-link img,
html.dark-mode .sidebar .app-name img,
html.gh-dark .sidebar .app-name-link img,
html.gh-dark .sidebar .app-name img {
  background: rgba(255,255,255,0.92);
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

/* ===== Lightbox ===== */
.lb { position: fixed; inset: 0; display: none; z-index: 100000; }
.lb[aria-hidden="false"] { display: block; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.lb-stage { position: absolute; inset: 24px; display: flex; flex-direction: column; gap: 10px; }
.lb-viewport { flex: 1; overflow: hidden; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); position: relative; }
.lb-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: 0 0; cursor: grab; user-select: none; touch-action: none; }
.lb-content.dragging { cursor: grabbing; }
.lb-content img { max-width: none; max-height: none; display: block; }
.lb-content svg {
  background: rgba(255,255,255,0.92);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35);
}
.lb-close { align-self: flex-end; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: rgba(0,0,0,0.55); }
.lb-hint { color: rgba(255,255,255,0.78); font-size: 12px; text-align: center; }
@media (max-width: 640px) { .lb-stage { inset: 12px; } .lb-hint { font-size: 11px; } }

/* 可點擊提示 */
.markdown-section img,
.markdown-section .mermaid svg { cursor: zoom-in; }