/* ── Roadmap Page Styles ─────────────────────────────
 * 
 * Layout: roadmap-layout > roadmap-nav + roadmap-main + roadmap-detail
 * Theme variables for default/forest/dark/sketch
 * Three node states: covered(✅), uncovered(🔧), important(🎯)
 * Sidebar slide animation: 300ms
 * Mobile responsive: collapsible groups, full-screen detail
 */

/* ── Theme Variables: Default (blue) ────────────── */
.roadmap-layout {
  --rm-node-bg: #ffffff;
  --rm-node-border: #d0d7de;
  --rm-node-text: #1f2328;
  --rm-node-shadow: rgba(31, 35, 40, 0.04);
  --rm-edge-color: #d0d7de;
  --rm-bg: #fafbfc;  /* 画布背景接近白（原 #f6f8fa 偏灰，微调更浅） */
  --rm-header-bg: #ffffff;
  --rm-sidebar-bg: #ffffff;
  --rm-sidebar-border: #d0d7de;
  --rm-detail-bg: #ffffff;
  --rm-detail-text: #1f2328;
  --rm-covered-bg: #dafbe1;
  --rm-covered-border: #3fb950;
  --rm-covered-text: #1a7f37;
  --rm-uncovered-bg: #f6f8fa;
  --rm-uncovered-border: #d0d7de;
  --rm-uncovered-text: #656d76;
  --rm-important-bg: #fff8c5;
  --rm-important-border: #d29922;
  --rm-important-text: #9a6700;
  --rm-group-bg: #f6f8fa;
  --rm-group-border: #d0d7de;
  --rm-group-header-bg: #eef1f5;
  --rm-link-color: #0969da;
  --rm-zoom-bg: rgba(255, 255, 255, 0.9);
  --rm-zoom-border: #d0d7de;
  --rm-zoom-text: #1f2328;
}

/* ── Theme: Forest (green) ──────────────────────── */
.roadmap-layout.theme-forest {
  --rm-node-bg: #f0fdf4;
  --rm-node-border: #86efac;
  --rm-node-text: #14532d;
  --rm-edge-color: #86efac;
  --rm-bg: #f0fdf4;
  --rm-header-bg: #dcfce7;
  --rm-sidebar-bg: #f0fdf4;
  --rm-sidebar-border: #86efac;
  --rm-detail-bg: #f0fdf4;
  --rm-detail-text: #14532d;
  --rm-covered-bg: #bbf7d0;
  --rm-covered-border: #22c55e;
  --rm-covered-text: #166534;
  --rm-uncovered-bg: #f0fdf4;
  --rm-uncovered-border: #86efac;
  --rm-uncovered-text: #4d7c0f;
  --rm-important-bg: #fef9c3;
  --rm-important-border: #eab308;
  --rm-important-text: #854d0e;
  --rm-group-bg: #dcfce7;
  --rm-group-border: #86efac;
  --rm-group-header-bg: #bbf7d0;
  --rm-link-color: #16a34a;
  --rm-zoom-bg: rgba(240, 253, 244, 0.95);
  --rm-zoom-border: #86efac;
  --rm-zoom-text: #14532d;
}

/* ── Theme: Dark ────────────────────────────────── */
.roadmap-layout.theme-dark {
  --rm-node-bg: #1c2128;
  --rm-node-border: #444c56;
  --rm-node-text: #e6edf3;
  --rm-edge-color: #444c56;
  --rm-bg: #0d1117;
  --rm-header-bg: #161b22;
  --rm-sidebar-bg: #161b22;
  --rm-sidebar-border: #30363d;
  --rm-detail-bg: #161b22;
  --rm-detail-text: #e6edf3;
  --rm-covered-bg: #0f5323;
  --rm-covered-border: #238636;
  --rm-covered-text: #3fb950;
  --rm-uncovered-bg: #1c2128;
  --rm-uncovered-border: #444c56;
  --rm-uncovered-text: #8b949e;
  --rm-important-bg: #341a00;
  --rm-important-border: #d29922;
  --rm-important-text: #d29922;
  --rm-group-bg: #161b22;
  --rm-group-border: #30363d;
  --rm-group-header-bg: #1c2128;
  --rm-link-color: #58a6ff;
  --rm-zoom-bg: rgba(22, 27, 34, 0.95);
  --rm-zoom-border: #30363d;
  --rm-zoom-text: #e6edf3;
}

/* ── Theme: Sketch (hand-drawn) ─────────────────── */
.roadmap-layout.theme-sketch {
  --rm-node-bg: #fefce8;
  --rm-node-border: #a16207;
  --rm-node-text: #422006;
  --rm-edge-color: #a16207;
  --rm-bg: #fefce8;
  --rm-header-bg: #fef3c7;
  --rm-sidebar-bg: #fefce8;
  --rm-sidebar-border: #a16207;
  --rm-detail-bg: #fefce8;
  --rm-detail-text: #422006;
  --rm-covered-bg: #d9f99d;
  --rm-covered-border: #65a30d;
  --rm-covered-text: #3f6212;
  --rm-uncovered-bg: #fef9c3;
  --rm-uncovered-border: #a16207;
  --rm-uncovered-text: #92400e;
  --rm-important-bg: #fed7aa;
  --rm-important-border: #ea580c;
  --rm-important-text: #9a3412;
  --rm-group-bg: #fef3c7;
  --rm-group-border: #a16207;
  --rm-group-header-bg: #fde68a;
  --rm-link-color: #b45309;
  --rm-zoom-bg: rgba(254, 252, 232, 0.95);
  --rm-zoom-border: #a16207;
  --rm-zoom-text: #422006;
}

/* ── Layout ─────────────────────────────────────── */
.roadmap-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  background: var(--rm-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.roadmap-nav {
  width: 240px;
  min-width: 240px;
  background: var(--rm-sidebar-bg);
  border-right: 1px solid var(--rm-sidebar-border);
  padding: 16px 0;
  overflow-y: auto;
  flex-shrink: 0;
  /* 2026-08-19：左侧固定不随页面滚动（与列表页 roadmap-nav 一致，sticky + 高度撑满视口） */
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  align-self: flex-start;
  /* 2026-08-19：隐藏滚动条（内容不高，不显示更清爽） */
  scrollbar-width: none;
}
.roadmap-nav::-webkit-scrollbar {
  display: none;
}

.roadmap-main {
  flex: 1;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-right 300ms ease;
}

.roadmap-main.main-with-detail {
  margin-right: 0;
}

/* ── Header ─────────────────────────────────────── */
.roadmap-header {
  /* 2026-08-19：grid 三列，标题区水平居中；右列放主题+日期；与容器同宽右对齐留 380px 广告位 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 24px;
  background: var(--rm-header-bg);
  border-bottom: 1px solid var(--rm-sidebar-border);
  flex-shrink: 0;
  width: calc(100% - 380px);
}

.roadmap-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: center;  /* 标题区（SVG+标题+副标题）水平居中 */
}

.roadmap-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.roadmap-icon .devicon {
  width: 48px;
  height: 48px;
}

.roadmap-header-text h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--rm-node-text);
}

.roadmap-description {
  font-size: 14px;
  color: var(--rm-uncovered-text);
  margin: 4px 0 0;
}

.roadmap-header-right {
  display: flex;
  flex-direction: column;  /* 主题在上、最后更新在下 */
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  justify-self: end;
}

/* 主题标签 + 更新日期（2026-08-19） */
.roadmap-theme-label {
  font-size: 13px;
  color: var(--rm-uncovered-text);
  font-weight: 500;
  margin-right: 4px;
  align-self: center;
}
.roadmap-updated {
  font-size: 12px;
  color: var(--rm-uncovered-text);
}

/* ── Stats Summary ──────────────────────────────── */
.roadmap-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.stat-covered { color: var(--rm-covered-text); font-weight: 600; }
.stat-important { color: var(--rm-important-text); font-weight: 600; }
.stat-uncovered { color: var(--rm-uncovered-text); font-weight: 600; }
.stat-total {
  font-size: 12px;
  color: var(--rm-uncovered-text);
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--rm-sidebar-border);
}

/* ── Theme Switcher ──────────────────────────────── */
.roadmap-theme-switcher {
  display: flex;
  gap: 4px;
}

.theme-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rm-sidebar-border);
  border-radius: 6px;
  background: var(--rm-node-bg);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0.7;
}

.theme-btn:hover {
  opacity: 1;
  border-color: var(--rm-link-color);
}

.theme-btn.active {
  opacity: 1;
  border-color: var(--rm-link-color);
  box-shadow: 0 0 0 2px var(--rm-link-color);
}

/* ── React Flow Container ───────────────────────── */
.roadmap-container {
  width: calc(100% - 380px);
  min-width: 380px;
  /* 画布高度 = 路线图完整高度（不滚动、不拖动，锁定静态显示）。
     原 720px 只显示部分，改为自适应内容高度 */
  height: auto;
  min-height: 2000px;
  background: var(--rm-bg);
  position: relative;
}

/* Override React Flow internal styles */
.roadmap-container .react-flow {
  width: 100%;
  height: 2000px;  /* 与容器一致，撑满完整路线图 */
  /* 背景网格点颜色：随背景调浅（背景 #fafbfc 接近白），用 #e3e5e9 保持可见但柔和 */
  --xy-background-pattern-color: #e3e5e9;
}

.roadmap-container .react-flow__node {
  cursor: pointer;
}

/* ── Custom Node Styles ─────────────────────────── */
.roadmap-node {
  width: 200px;
  height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--rm-node-border);
  background: var(--rm-node-bg);
  color: var(--rm-node-text);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  box-shadow: none;
  white-space: nowrap;
  box-sizing: border-box;
  animation: roadmapNodeEnter 0.45s ease-out both;
}

/* 节点宽度分级（旧版字符串 width: full/third/half；数值 width 由 JS 内联样式覆盖） */
.roadmap-node.node-w-third { width: 96px; }
.roadmap-node.node-w-half  { width: 147px; }

/* 窄节点（≤100px，如列表/元组/集合 61px）：减小左右 padding 让文本完整显示 */
.roadmap-node.node-w-narrow {
  padding-left: 6px;
  padding-right: 6px;
}

/* ── 分组框（Configuration / Environments 视觉容器）── */
.roadmap-node.roadmap-group {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px dashed #9ca3af;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* 标题固定在底部 */
  box-shadow: none !important;
  cursor: default;
  pointer-events: none;  /* 不拦截内部节点的点击 */
  z-index: -1;
  opacity: 1 !important;
  transform: none !important;
}

/* 分组框无任何悬停/过渡效果 */
.roadmap-node.roadmap-group:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #9ca3af !important;
  background: #ffffff !important;
}

.roadmap-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 2px 10px;
  margin-bottom: 6px;    /* 距底边小间距，水平居中 */
  background: transparent;
  border-radius: 4px;
  white-space: nowrap;
}

/* 手柄垂直居中：节点高 40px，手柄放 50%（约 20px）中心位置 */
.roadmap-node .react-flow__handle-left,
.roadmap-node .react-flow__handle-right {
  top: 50% !important;
  transform: translate(0, -50%) !important;
}

/* 分组框 target 手柄补偿：全局边层 translateY(-10px) 会把边终点上移 10px，
   导致连到分组框顶部手柄的线落在边界上方（空隙）。
   将分组框 top handle 下移 10px，抵消偏移，让线精确触达分组框顶部边界。 */
.roadmap-node.roadmap-group .react-flow__handle-top {
  top: 10px !important;
}

/* 分组框 source 手柄补偿：分组框作为起点出线时（如 Container/Layout/Quotation → Semantic Markup），
   全局边层 translateY(-10px) 会让边起点相对手柄上移 10px。
   将分组框 left/right handle 下移 10px，抵消偏移，让线从分组框边界精确出线。 */
.roadmap-node.roadmap-group .react-flow__handle-left,
.roadmap-node.roadmap-group .react-flow__handle-right {
  top: calc(50% + 10px) !important;
  transform: translate(0, -50%) !important;
}

/* 分组框手柄隐藏：分组框作为视觉容器，不需要显示手柄小圆点（连线仍正常渲染）。
   覆盖 React Flow 默认手柄样式，隐藏所有分组框手柄（含 top/left/right/bottom）。 */
.roadmap-node.roadmap-group .react-flow__handle {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* temp 中转节点：完全隐形（本体透明 + 手柄隐藏 + 无边框），仅作为连线中转点 */
.roadmap-node[data-node-id="temp"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.roadmap-node[data-node-id="temp"] .react-flow__handle {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 连接线微调：边端点与手柄完全对齐（上移 10px）
   ⚠️ 不可删除：React Flow handleBounds 首测快照与自定义手柄 CSS 存在 ~10px 偏差，
   整体上移边层补偿。移除会导致所有连接线向下偏移、端点错开。 */
.roadmap-container .react-flow__edges svg {
  transform: translateY(-10px);
}

/* hover 用 box-shadow 外圈模拟粗边框（不改 border-width、不做位移，
   避免节点尺寸/位置变化导致 Handle 位移、连接线跳动） */
.roadmap-node:hover {
  box-shadow: 0 0 0 2px var(--rm-node-border), 0 4px 12px var(--rm-node-shadow);
}

/* Node entrance keyframes */
@keyframes roadmapNodeEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Node three states */
.node-status-covered {
  background: var(--rm-covered-bg);
  border-color: var(--rm-covered-border);
  color: var(--rm-covered-text);
}

.node-status-uncovered {
  background: var(--rm-uncovered-bg);
  border-color: var(--rm-uncovered-border);
  color: var(--rm-uncovered-text);
  border-style: dashed;
  opacity: 0.75;
}

.node-status-uncovered:hover {
  opacity: 1;
  border-style: solid;
}

.node-status-uncovered.node-hover-uncovered::after {
  content: '尚未覆盖';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rm-uncovered-text);
  color: var(--rm-node-bg);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
}

.node-status-important {
  background: var(--rm-important-bg);
  border-color: var(--rm-important-border);
  color: var(--rm-important-text);
  font-weight: 700;
  /* 默认细边框：只保留 1px 金色边框，无外圈阴影 */
}

/* Important covered nodes: green bg + gold highlight border */
.node-important-covered {
  background: var(--rm-covered-bg);
  border-color: var(--rm-important-border);
  color: var(--rm-covered-text);
  font-weight: 700;
}

/* important 节点 hover：变粗边框（2px 金色外圈）+ 叠加悬停阴影。
   不改 border-width（避免节点尺寸变化导致 Handle 位移、连接线跳动），
   用 box-shadow 外圈模拟粗边框。 */
.node-status-important:hover,
.node-important-covered:hover {
  box-shadow: 0 0 0 2px var(--rm-important-border), 0 4px 12px var(--rm-node-shadow);
}

/* 外链节点（Backend/DevOps/Python for Data Analysis）：蓝色实底 + 白字
   覆盖 uncovered 的虚线/半透明样式 */
.roadmap-node.node-external-link {
  background: #2563eb;
  border: 1px solid #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  font-weight: 700;
  opacity: 1;
  border-style: solid;
}

.roadmap-node.node-external-link:hover {
  box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.4);
}

.node-status-icon {
  font-size: 14px;
  line-height: 1;
}

.node-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Node levels */
.node-level-1 .node-title { font-weight: 700; font-size: 14px; }
.node-level-2 .node-title { font-weight: 600; }
.node-level-3 .node-title { font-weight: 500; font-size: 12px; }

/* 字体统一（老板要求 2026-08-04）：
   - 黄色节点（important）：统一参照「基础入门」（14px / 700）
   - 绿色节点（covered）：统一参照「类 / 方法」（13px / 500）
   覆盖 level 分层差异，保证同类节点字体一致 */
.node-status-important .node-title,
.node-important-covered .node-title {
  font-size: 14px;
  font-weight: 700;
}
.node-status-covered .node-title {
  font-size: 13px;
  font-weight: 500;
}

/* ── Detail Sidebar ─────────────────────────────── */
.roadmap-detail {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--rm-detail-bg);
  border-left: 1px solid var(--rm-sidebar-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  transition: right 300ms ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.roadmap-detail.detail-open {
  right: 0;
}

.roadmap-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--rm-sidebar-border);
  flex-shrink: 0;
}

.roadmap-detail-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--rm-detail-text);
}

.roadmap-detail-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rm-sidebar-border);
  border-radius: 6px;
  background: var(--rm-node-bg);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rm-uncovered-text);
  transition: all 0.2s;
}

.roadmap-detail-close:hover {
  background: var(--rm-group-header-bg);
}

/* Status badge */
.roadmap-detail-status {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--rm-sidebar-border);
}

.status-badge-covered {
  background: var(--rm-covered-bg);
  color: var(--rm-covered-text);
}

.status-badge-uncovered {
  background: var(--rm-uncovered-bg);
  color: var(--rm-uncovered-text);
}

.status-badge-important {
  background: var(--rm-important-bg);
  color: var(--rm-important-text);
}

.status-badge-important-covered {
  background: var(--rm-covered-bg);
  color: var(--rm-covered-text);
  border-left: 4px solid var(--rm-important-border);
}

/* Description */
.roadmap-detail-description {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rm-detail-text);
  border-bottom: 1px solid var(--rm-sidebar-border);
}

/* Links */
.roadmap-detail-links {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rm-sidebar-border);
}

.detail-link {
  display: block;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.detail-link-internal {
  background: var(--rm-covered-bg);
  color: var(--rm-covered-text);
  border: 1px solid var(--rm-covered-border);
}

.detail-link-internal:hover {
  background: var(--rm-covered-border);
  color: #fff;
}

.detail-link-external {
  background: var(--rm-uncovered-bg);
  color: var(--rm-link-color);
  border: 1px solid var(--rm-uncovered-border);
}

.detail-link-external:hover {
  background: var(--rm-link-color);
  color: #fff;
}

.detail-no-tutorial {
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--rm-uncovered-text);
  font-style: italic;
  background: var(--rm-uncovered-bg);
  border-radius: 6px;
  border: 1px dashed var(--rm-uncovered-border);
}

/* Related */
.roadmap-detail-related {
  padding: 16px 20px;
}

.detail-related-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rm-uncovered-text);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.detail-related-list li {
  margin-bottom: 4px;
}

.related-link {
  color: var(--rm-link-color);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.related-link:hover {
  text-decoration: underline;
}

/* ── Zoom Controls ──────────────────────────────── */
.roadmap-zoom-controls {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 500;
}

.zoom-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rm-zoom-border);
  border-radius: 6px;
  background: var(--rm-zoom-bg);
  color: var(--rm-zoom-text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.zoom-btn:hover {
  background: var(--rm-group-header-bg);
  border-color: var(--rm-link-color);
}

/* ── Minimap Container ──────────────────────────── */
.roadmap-minimap-container {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* ── Static Fallback Layout ─────────────────────── */
.roadmap-static-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px;
}

.roadmap-static-layout .roadmap-node {
  position: relative;
}

/* ── Noscript Fallback ──────────────────────────── */
.roadmap-noscript {
  padding: 24px;
}

.roadmap-noscript h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

.roadmap-noscript ul {
  list-style: none;
  padding: 0;
}

.roadmap-noscript li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rm-sidebar-border);
}

.roadmap-noscript a {
  color: var(--rm-link-color);
  text-decoration: none;
}

/* ── Body Content (below roadmap) ───────────────── */
.roadmap-body {
  padding: 24px;
  border-top: 1px solid var(--rm-sidebar-border);
}

/* ── Sidebar Navigation (roadmap list) ──────────── */
.roadmap-nav .toc-sidebar {
  padding: 0;
}

.roadmap-nav-group {
  padding: 12px 16px 4px;
}

.roadmap-nav-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rm-uncovered-text);
  margin-bottom: 8px;
}

.roadmap-nav-group a {
  display: block;
  padding: 6px 16px;
  font-size: 14px;
  color: var(--rm-link-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.roadmap-nav-group a:hover {
  background: var(--rm-group-header-bg);
  border-left-color: var(--rm-link-color);
}

.roadmap-nav-group a.active {
  background: var(--rm-covered-bg);
  border-left-color: var(--rm-covered-border);
  font-weight: 600;
}

/* ── Sketch Theme Special Styles ────────────────── */
.theme-sketch .roadmap-node {
  border-radius: 12px 4px 8px 16px;
  border-width: 2px;
  border-style: solid;
  transform: rotate(-0.5deg);
}

.theme-sketch .roadmap-node:nth-child(even) {
  border-radius: 4px 12px 16px 8px;
  transform: rotate(0.5deg);
}

.theme-sketch .node-status-uncovered {
  border-style: dashed;
}

/* ── RTL Support ────────────────────────────────── */
[dir="rtl"] .roadmap-detail {
  right: auto;
  left: -400px;
  border-left: none;
  border-right: 1px solid var(--rm-sidebar-border);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
}

[dir="rtl"] .roadmap-detail.detail-open {
  left: 0;
}

[dir="rtl"] .roadmap-nav {
  border-right: none;
  border-left: 1px solid var(--rm-sidebar-border);
}

[dir="rtl"] .roadmap-nav-group a {
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .roadmap-nav-group a:hover {
  border-right-color: var(--rm-link-color);
}

[dir="rtl"] .roadmap-nav-group a.active {
  border-right-color: var(--rm-covered-border);
}

[dir="rtl"] .roadmap-node {
  direction: rtl;
  text-align: right;
}

/* ── Mobile Responsive ──────────────────────────── */
@media (max-width: 768px) {
  .roadmap-layout {
    flex-direction: column;
  }

  .roadmap-layout.mobile-view .roadmap-nav {
    width: 100%;
    min-width: 100%;
    max-height: 60px;
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid var(--rm-sidebar-border);
    transition: max-height 0.3s ease;
  }

  .roadmap-layout.mobile-view .roadmap-nav.expanded {
    max-height: 400px;
    overflow-y: auto;
  }

  .roadmap-header {
    flex-direction: column;
    padding: 12px 16px;
  }

  .roadmap-header-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }

  .roadmap-container {
    min-height: 400px;
  }

  /* Detail panel: full screen on mobile */
  .roadmap-detail.mobile-detail {
    width: 100vw;
  }

  .roadmap-detail.detail-open.mobile-detail {
    width: 100vw;
    right: 0;
  }

  .roadmap-zoom-controls {
    bottom: 12px;
    right: 12px;
  }

  .zoom-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Node font size on mobile */
  .roadmap-node {
    font-size: 12px;
    padding: 6px 10px;
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .roadmap-header-left {
    flex-direction: column;
    gap: 8px;
  }

  .roadmap-theme-switcher {
    gap: 2px;
  }

  .theme-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .roadmap-stats {
    font-size: 12px;
  }
}


/* ============================================================
 * Fix 2026-08-03（根因修复，替代错误的 Phase fix）:
 * React Flow 的 edges svg 依赖默认尺寸（300x150）+ overflow:visible
 * 渲染连接线。此前两条规则把 svg 压成 0x0 导致连接线不可见：
 *   1) reset.css 全局规则 `img, svg { max-width: 100% }` 限制 svg 宽度
 *   2) 旧的 Phase fix 强制 width/height:100% !important（父容器 .react-flow__edges
 *      本身是 0x0，取 100% 仍为 0）
 * 修复：解除 max-width 限制 + 恢复 svg 默认尺寸，让 React Flow 正常绘制边。
 * ============================================================ */
.roadmap-container .react-flow__edges svg {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible;
}

/* 同样修复 nodes 容器（保持一致） */
.roadmap-container .react-flow__nodes {
  width: 100%;
  height: 100%;
}

/* 斑马线动画：虚线边 dash 沿路径流动（保留 10,6 虚线样式，仅移动 offset） */
.react-flow__edge.animated path.react-flow__edge-path {
  stroke-dasharray: 10, 6 !important;
  animation: roadmapDashFlow 0.5s linear infinite;
}

@keyframes roadmapDashFlow {
  to {
    stroke-dashoffset: -16; /* 10+6 = 16，一个虚线周期，无缝循环 */
  }
}

/* 虚线动画方向统一：source 是绿、target 是黄的边反转动画方向，
   保证虚线始终从「黄(important)→绿(covered)」方向流动 */
.react-flow__edge.edge-reverse-anim path.react-flow__edge-path {
  animation-direction: reverse;
}

/* ── E2 响应式（2026-08-19）：窄屏适配，roadmap.sh 风格 ───────────── */
@media (max-width: 1200px) {
  .roadmap-nav { display: none; }            /* 窄屏隐藏左侧路线导航 */
  .roadmap-header { width: 100%; }           /* 取消右侧 380px 广告位预留 */
  .roadmap-container { width: 100%; min-width: 0; }
  .roadmap-main { min-width: 0; }
}
@media (max-width: 768px) {
  .roadmap-header { flex-direction: column; align-items: center; gap: 12px; }
  .roadmap-header-left { justify-content: center; }
  .roadmap-header-right { width: 100%; justify-content: center; }
  .roadmap-detail { width: 100%; right: -100%; }  /* 移动端详情面板全屏滑出 */
  .roadmap-container .react-flow { height: 560px !important; }  /* 移动端画布固定高度，fitView 缩放适配 */
}