/* ================== Page ================== */
.job-roadmap-page {
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    /* 与模板内联样式一致：在父级已限高时占满剩余空间且不向外撑开 */
    min-height: 0;
    overflow: hidden;
}

#job-roadmap-root {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}

/* ================== ReactFlow base (local copy) ================== */
.react-flow {
    direction: ltr;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.react-flow__container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.react-flow__pane {
    z-index: 1;
    cursor: default;
}

.react-flow__viewport {
    z-index: 2;
    pointer-events: none;
    transform-origin: 0 0;
}

.react-flow__renderer {
    z-index: 4;
}

.react-flow__selection {
    z-index: 6;
}

.react-flow__background {
    z-index: 0;
}

.react-flow .react-flow__edges {
    overflow: visible;
    pointer-events: none;
}

.react-flow__edge {
    cursor: default;
    pointer-events: visibleStroke;
}

.react-flow__edge-path,
.react-flow__connection-path {
    fill: none;
    stroke: #c8c2b1;
    stroke-width: 1.5;
    /* 与 marker 衔接：圆帽会在几何端点外延伸，易造成箭头与线「错位」感 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.react-flow__edge.selected .react-flow__edge-path {
    stroke: #1677ff;
    stroke-width: 2;
}

.react-flow__nodes {
    pointer-events: none;
    transform-origin: 0 0;
}

.react-flow__node {
    position: absolute;
    box-sizing: border-box;
    transform-origin: 0 0;
    pointer-events: all;
    z-index: 1;
    cursor: pointer;
}

/* ================== Handles ================== */
.react-flow__handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid #fff;
    background: #b9b3a0;
    opacity: 0;
    transition: opacity 120ms ease;
}

.react-flow__handle.connectionindicator {
    cursor: crosshair;
    pointer-events: all;
}

/* 非编辑模式：不显示出入口，且不参与命中，避免挡在节点边缘的点击 */
.jr-canvas-wrap:not(.is-editing) .react-flow__handle {
    opacity: 0 !important;
    pointer-events: none;
}

/* 编辑模式：显示连接点以便拖拽连线 */
.jr-canvas-wrap.is-editing .react-flow__handle {
    opacity: 1;
}

/* 编辑模式：从节点拖出连线时禁止划选画布内文字，避免浏览器抢占拖拽导致连线失败 */
.jr-canvas-wrap.is-editing .react-flow__node,
.jr-canvas-wrap.is-editing .react-flow__pane,
.jr-canvas-wrap.is-editing .react-flow__edges {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* 连接点中心落在节点边框上：偏移 = handle 边长的一半（当前 20px → ±10px，与 job_roadmap.page.ts 中 HANDLE_SIZE 一致） */
.react-flow__handle-left {
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
}

.react-flow__handle-right {
    top: 50%;
    right: -3px;
    transform: translateY(-50%);
}

.react-flow__handle-top {
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
}

.react-flow__handle-bottom {
    top: auto;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
}

/* ================== Layout ================== */
.jr-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
    transition: grid-template-columns 200ms ease;
}

.jr-shell.is-drawer-open {
    /* 左侧 5/9、右侧抽屉 4/9 */
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
}

/* Grid 子项默认 min-height:auto 会按内容撑开整页，强制可压缩才能把滚动交给抽屉 */
.jr-shell > .jr-canvas-wrap,
.jr-shell > aside.jr-drawer {
    min-height: 0;
    min-width: 0;
}

/* 抽屉打开：左侧路线图上的可点击遮罩（仅浏览抽屉时由 JSX 挂载 .jr-drawer-scrim，见 frontend） */
.jr-drawer-scrim {
    position: absolute;
    inset: 0;
    z-index: 14;
    margin: 0;
    padding: 0;
    background: rgba(15, 18, 22, 0.24);
    cursor: pointer;
}

.theme--dark .jr-drawer-scrim {
    background: rgba(0, 0, 0, 0.52);
}

/* 「进入编辑」且抽屉打开：仅视觉效果压暗画布，仍可操作节点/连线/pane */
.jr-shell.is-drawer-open .jr-canvas-wrap.is-editing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 13;
    background: rgba(15, 18, 22, 0.24);
    pointer-events: none;
}

.theme--dark .jr-shell.is-drawer-open .jr-canvas-wrap.is-editing::after {
    background: rgba(0, 0, 0, 0.52);
}

/* 遮罩在路线图之上：浮层控件需高于遮罩才可点按 */
.jr-shell.is-drawer-open .jr-overview,
.jr-shell.is-drawer-open .jr-topbar,
.jr-shell.is-drawer-open .jr-edit-toggle {
    z-index: 25;
}

.jr-canvas-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: none;
    border-radius: 0;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    /* 与固定顶栏错开：左侧两张卡片相对画布的 top 以此为基准 */
    --jr-under-nav: 32px;
}

/* 切换路线数据时铺满画布区并居中，避免仅靠 flex 子项时文字缩在左上角 */
.jr-canvas-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    font-size: 15px;
    font-weight: 500;
    color: #4f555e;
    text-align: center;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ================== Floating top-left toolbar ================== */
.jr-topbar {
    position: absolute;
    top: var(--jr-under-nav);
    left: 12px;
    z-index: 10;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #ebe6d8;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* 公司路线面板：纵向排布，下拉浮层宽度与卡片一致 */
.jr-topbar:not(.jr-topbar-edit) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 220px;
}

/* ---------- 自定义公司选择（替代原生 select 下拉） ---------- */
.jr-company-picker {
    position: relative;
    width: 100%;
    min-width: 0;
}

.jr-company-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.04);
    color: #1f2328;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}

.jr-company-trigger:hover {
    background: rgba(0, 0, 0, 0.07);
}

.jr-company-trigger.is-open {
    background: #f5efdf;
}

.jr-company-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.jr-company-trigger-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.jr-company-trigger-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
}

.jr-company-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jr-company-trigger-chevron {
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1;
    color: #8a8f98;
    transition: transform 150ms ease;
}

.jr-company-trigger.is-open .jr-company-trigger-chevron {
    transform: rotate(-180deg);
}

.jr-company-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 6px;
    background: #fff;
    border: 1px solid #ebe6d8;
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
    max-height: min(320px, 55vh);
    overflow-y: auto;
}

.jr-company-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #1f2328;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background 100ms ease;
}

.jr-company-option-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
}

.jr-company-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jr-company-option:hover {
    background: #f5efdf;
}

.jr-company-option.is-selected {
    background: rgba(22, 119, 255, 0.1);
    color: #1677ff;
    font-weight: 600;
}

.jr-company-empty {
    padding: 12px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a8f98;
    text-align: center;
}

.theme--dark .jr-company-empty {
    color: #8b949e;
}

.jr-topbar.jr-topbar-edit {
    top: var(--jr-under-nav);
    left: 12px;
    right: 12px;
    max-width: none;
    justify-content: flex-start;
}

/* 独立浮动的「进入编辑」按钮，挂在画布右上角，不与左侧公司面板共用样式 */
.jr-edit-toggle {
    position: absolute;
    top: var(--jr-under-nav);
    right: 12px;
    z-index: 11;
    border: 1px solid #e3decd;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2328;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: background 120ms ease, border-color 120ms ease;
}

.jr-edit-toggle:hover {
    background: #f5efdf;
    border-color: #d6cfb8;
}

.theme--dark .jr-edit-toggle {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.theme--dark .jr-edit-toggle:hover {
    background: #232832;
}

/* 编辑模式下：第一行编辑栏，公司面板与进度卡各下移一行高（64px），互不遮挡 */
.jr-canvas-wrap.is-editing .jr-topbar:not(.jr-topbar-edit) {
    top: calc(var(--jr-under-nav) + 64px);
}

.jr-canvas-wrap.is-editing .jr-overview {
    top: calc(var(--jr-under-nav) + 128px);
}

.jr-toolbar-btn,
.jr-topbar input {
    border: 1px solid #e3decd;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    background: #fff;
    color: #1f2328;
    line-height: 1.2;
}

.jr-toolbar-btn {
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.jr-toolbar-btn:hover:not(:disabled) {
    background: #f5efdf;
    border-color: #d6cfb8;
}

.jr-toolbar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.jr-toolbar-btn.primary {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
}

.jr-toolbar-btn.primary:hover:not(:disabled) {
    background: #1268e0;
    border-color: #1268e0;
}

@keyframes jr-toolbar-spin {
    to {
        transform: rotate(360deg);
    }
}

.jr-toolbar-btn.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jr-toolbar-btn.is-loading::before {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 2px solid #c4beb0;
    border-right-color: #6b6558;
    border-radius: 50%;
    animation: jr-toolbar-spin 0.65s linear infinite;
}

.jr-toolbar-btn.primary.is-loading::before {
    border-color: rgba(255, 255, 255, 0.35);
    border-right-color: #fff;
}

/* ================== Floating left overview card ================== */
.jr-overview {
    position: absolute;
    top: calc(var(--jr-under-nav) + 64px);
    left: 12px;
    z-index: 10;
    width: 220px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #ebe6d8;
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.jr-overview-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jr-overview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 12px;
    color: #4f555e;
    margin-bottom: 10px;
}

.jr-overview-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jr-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cfd2d8;
    display: inline-block;
}

.jr-dot.todo {
    background: #cfd2d8;
}

.jr-dot.current {
    background: #f5a524;
}

.jr-dot.done {
    background: #22c55e;
}

.jr-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #4f555e;
}

.jr-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #efeadb;
    overflow: hidden;
}

.jr-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 999px;
    transition: width 200ms ease;
}

/* ================== Node card ================== */
.jr-node-card {
    position: relative;
    min-width: 160px;
    max-width: 220px;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #b8b19c;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.jr-node-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: #8f8770;
}

.react-flow__node.selected .jr-node-card {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

.jr-node-card.current {
    border-color: #f5a524;
    box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.12);
}

.jr-node-card.done {
    border-color: #22c55e;
}

.jr-node-status {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cfd2d8;
}

.jr-node-card.current .jr-node-status {
    background: #f5a524;
    box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18);
}

.jr-node-card.done .jr-node-status {
    background: #22c55e;
}

.jr-node-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    padding-right: 14px; /* 右上角状态点 */
}

.jr-node-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 0;
    padding-right: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.jr-node-remain {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.jr-node-remain--future {
    color: #d2a206;
    background: rgba(224, 69, 32, 0.14);
}

.jr-node-remain--today {
    color: #ca7104;
    background: rgba(245, 165, 36, 0.14);
}

.jr-node-remain--overdue {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.theme--dark .jr-node-remain--future {
    color: #ff8a65;
    background: rgba(255, 138, 101, 0.18);
}

.jr-node-meta {
    font-size: 12px;
    color: #8a8f98;
    line-height: 1.2;
}

/* node-card 内的迷你进度条 */
.jr-node-progress {
    margin-top: 8px;
    height: 5px;
    border-radius: 999px;
    background: #efeadb;
    overflow: hidden;
}

.jr-node-progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 999px;
    transition: width 220ms ease;
}

.jr-node-card.current .jr-node-progress > span {
    background: linear-gradient(90deg, #f5a524 0%, #e08a00 100%);
}

/* 已完成态优先级高于进行中态：节点既是当前又已完成时仍显示绿色 */
.jr-node-card.done .jr-node-progress > span {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

/* ================== Drawer ================== */
.jr-drawer {
    position: relative;
    background: #fff;
    border-left: 1px solid #ebe6d8;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.04);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    font-size: 15px;
}

.jr-drawer-header {
    flex-shrink: 0;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f0ebda;
    background: #fff;
}

.jr-drawer-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.jr-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2328;
    flex: 1;
    margin: 0;
}

.jr-drawer-close {
    border: none;
    background: transparent;
    color: #8a8f98;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.jr-drawer-close:hover {
    background: #f5efdf;
    color: #1f2328;
}

.jr-drawer-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4f555e;
}

/* 抽屉：节点标题与进度条之间的目标日期 */
.jr-drawer-schedule {
    margin-top: 4px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #faf8f3;
    border: 1px solid #ebe6d8;
}

.jr-drawer-schedule-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b6558;
    margin-bottom: 6px;
}

.jr-drawer-schedule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jr-drawer-schedule-input {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 220px;
    border: 1px solid #e3decd;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.2;
    color: #1f2328;
    background: #fff;
}

.jr-drawer-schedule-clear {
    border: 1px solid #e3decd;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    background: #fff;
    color: #4f555e;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.jr-drawer-schedule-clear:hover {
    background: #f5efdf;
    border-color: #d6cfb8;
}

.jr-drawer-schedule-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a8f98;
}

.theme--dark .jr-drawer-schedule {
    background: #232832;
    border-color: #2a2f38;
}

.theme--dark .jr-drawer-schedule-label {
    color: #b1bac4;
}

.theme--dark .jr-drawer-schedule-input {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
}

.theme--dark .jr-drawer-schedule-clear {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #b1bac4;
}

.theme--dark .jr-drawer-schedule-clear:hover {
    background: #2a3140;
}

.jr-drawer-body {
    padding: 14px 18px 22px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.jr-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2328;
    margin: 4px 0 10px;
}

/* 环节：编辑 / 浏览侧栏 */
.jr-stage-block {
    border: 1px solid #ebe6d8;
    border-radius: 10px;
    padding: 12px 12px 10px;
    margin-bottom: 0;
    background: #faf8f3;
}

/* 编辑模式下「新增环节」按钮在最后一个环节之后，不能用 :last-child 选环节 */
.jr-drawer-body .jr-stage-block + .jr-stage-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #d4cdc0;
}

.jr-stage-editor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.jr-stage-title-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e3decd;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
    background: #fff;
    color: #1f2328;
}

.jr-stage-view {
    margin-bottom: 0;
}

.jr-drawer-body > .jr-stage-view:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d4cdc0;
}

.jr-stage-heading {
    font-size: 15px;
    font-weight: 600;
    color: #1f2328;
    margin: 0 0 10px;
    padding-bottom: 0;
    border-bottom: none;
}

/* 无环节介绍时，分割线仍在标题下（与原先一致） */
.jr-stage-view:not(:has(.jr-stage-intro)) .jr-stage-heading {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0ebda;
}

.jr-stage-intro-editor {
    box-sizing: border-box;
    border: 1px solid #e3decd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.45;
    background: #fff;
    color: #1f2328;
}

.jr-stage-intro {
    font-size: 14px;
    line-height: 1.55;
    color: #4f555e;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0ebda;
    white-space: pre-wrap;
    word-break: break-word;
}

.jr-stage-intro + .jr-link-card {
    margin-top: 0;
}

.jr-stage-intro .jr-link-desc-md-a {
    color: #1677ff;
    text-decoration: none;
}

.jr-stage-intro .jr-link-desc-md-a:hover {
    text-decoration: underline;
}

.jr-stage-empty {
    font-size: 14px;
    color: #8a8f98;
    padding: 8px 0;
}

/* link card (view mode) */
.jr-link-card {
    border: 1px solid #ebe6d8;
    border-radius: 10px;
    padding: 14px 14px 12px;
    min-height: 52px;
    background: #fff;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.jr-link-card:last-child {
    margin-bottom: 0;
}

/* 攻略链接的介绍文字（展示在链接上方） */
.jr-link-card .jr-link-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #4f555e;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ede8dc;
    white-space: pre-wrap;
    word-break: break-word;
}

.theme--dark .jr-link-card .jr-link-desc {
    color: #b1bac4;
    border-bottom-color: #2a2f38;
}

/* 介绍区内 Markdown 风格外链（与论坛管理员评论一致） */
.jr-link-desc .jr-link-desc-md-a {
    font-size: 14px;
    color: #1677ff;
    text-decoration: none;
    word-break: break-all;
}

.jr-link-desc .jr-link-desc-md-a:hover {
    text-decoration: underline;
}

.jr-link-card .row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.jr-link-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* 与首页 practice-ps-icon--default 同系：题库占位 */
.jr-link-ps-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
    color: #5c6b86;
    background: linear-gradient(145deg, #eceff3, #e2e6ec);
}

.jr-link-ps-icon svg {
    display: block;
}

.jr-link-ps-thumb-slot {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.jr-link-ps-thumb {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: rgba(0, 0, 0, 0.06);
}

.jr-link-card .row .jr-link-title-wrap > a {
    color: #1677ff;
    text-decoration: none;
    font-size: 15px;
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

.jr-link-card .row .jr-link-title-wrap > a:hover {
    text-decoration: underline;
}

/* 无 URL 时标题为正文样式，非链接 */
.jr-link-card .row .jr-link-title-wrap > .jr-link-title-plain {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: #1f2328;
    word-break: break-word;
}

.jr-link-card .row .external {
    color: #8a8f98;
    font-size: 13px;
}

.jr-link-card .status {
    font-size: 14px;
    color: #8a8f98;
    margin-left: auto;
}

.jr-link-card .status.done {
    color: #16a34a;
}

/* edit mode rows (kept compatible) */
.jr-link-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ede8dc;
}

.jr-link-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.jr-link-row a {
    color: #1677ff;
    text-decoration: none;
    font-size: 14px;
}

.jr-link-row a:hover {
    text-decoration: underline;
}

/* ================== ReactFlow controls ================== */
.react-flow__panel {
    margin: 16px;
}

.react-flow__controls {
    display: inline-flex;
    flex-direction: row;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #ebe6d8;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.react-flow__controls-button {
    width: 32px;
    height: 32px;
    border: none;
    border-right: 1px solid #f0ebda;
    background: transparent;
    color: #4f555e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.react-flow__controls-button:last-child {
    border-right: none;
}

.react-flow__controls-button:hover {
    background: #f5efdf;
}

.react-flow__controls-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.theme--dark .react-flow__controls {
    background: #1b1f26;
    border-color: #2a2f38;
}

.theme--dark .react-flow__controls-button {
    color: #c9d1d9;
    border-right-color: #2a2f38;
}

.theme--dark .react-flow__controls-button:hover {
    background: #232832;
}

/* ================== Empty state ================== */
.jr-empty {
    color: #8a8f98;
    font-size: 15px;
    padding: 24px 8px;
    text-align: center;
}

/* 抽屉内表单：仅作用于侧栏，不影响画布顶栏 */
.jr-drawer input:not([type='checkbox']),
.jr-drawer textarea {
    font-size: 15px;
}

.jr-drawer .jr-toolbar-btn {
    font-size: 14px;
}

/* ================== Dark theme ================== */
.theme--dark .job-roadmap-page,
.theme--dark .jr-canvas-wrap {
    background: #14171c;
}

.theme--dark .jr-canvas-loading {
    color: #b1bac4;
    background: rgba(20, 23, 28, 0.82);
}

.theme--dark .jr-topbar,
.theme--dark .jr-overview,
.theme--dark .jr-drawer,
.theme--dark .jr-drawer-header {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.theme--dark .jr-stage-block {
    background: #232832;
    border-color: #2a2f38;
}

.theme--dark .jr-stage-title-input {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
}

.theme--dark .jr-stage-heading {
    color: #c9d1d9;
    border-bottom-color: #2a2f38;
}

.theme--dark .jr-stage-intro-editor {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
}

.theme--dark .jr-stage-intro {
    color: #b1bac4;
}

.theme--dark .jr-stage-intro .jr-link-desc-md-a {
    color: #58a6ff;
}

.theme--dark .jr-drawer-body .jr-stage-block + .jr-stage-block {
    border-top-color: #3d4450;
}

.theme--dark .jr-drawer-body > .jr-stage-view:not(:last-child) {
    border-bottom-color: #3d4450;
}

.theme--dark .jr-link-row {
    border-bottom-color: #2a2f38;
}

.theme--dark .jr-stage-empty {
    color: #8b949e;
}

.theme--dark .jr-toolbar-btn,
.theme--dark .jr-topbar input {
    background: #1b1f26;
    border-color: #2a2f38;
    color: #c9d1d9;
}

.theme--dark .jr-company-trigger {
    background: rgba(255, 255, 255, 0.06);
    color: #c9d1d9;
}

.theme--dark .jr-company-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme--dark .jr-company-trigger.is-open {
    background: #232832;
}

.theme--dark .jr-company-trigger-chevron {
    color: #8b949e;
}

.theme--dark .jr-company-menu {
    background: #1b1f26;
    border-color: #2a2f38;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.theme--dark .jr-company-option:hover {
    background: #232832;
}

.theme--dark .jr-company-option.is-selected {
    background: rgba(56, 139, 253, 0.14);
    color: #58a6ff;
}

.theme--dark .jr-toolbar-btn:hover:not(:disabled) {
    background: #232832;
}

.theme--dark .jr-toolbar-btn.is-loading::before {
    border-color: #484f58;
    border-right-color: #c9d1d9;
}

.theme--dark .jr-toolbar-btn.primary.is-loading::before {
    border-color: rgba(255, 255, 255, 0.35);
    border-right-color: #fff;
}

.theme--dark .jr-overview-title,
.theme--dark .jr-drawer-title,
.theme--dark .jr-section-title,
.theme--dark .jr-node-title {
    color: #c9d1d9;
}

.theme--dark .jr-overview-legend,
.theme--dark .jr-progress-row,
.theme--dark .jr-drawer-progress,
.theme--dark .jr-node-meta {
    color: #8b949e;
}

.theme--dark .jr-progress-bar,
.theme--dark .jr-node-progress {
    background: #2a2f38;
}

.theme--dark .jr-node-card {
    background: #1b1f26;
    border-color: #3d4450;
    color: #c9d1d9;
}

/* 暗色：进行中 / 已完成 边框需明显高于背景，避免被 .theme--dark .jr-node-card 盖掉 */
.theme--dark .jr-node-card.current:not(.done) {
    border-color: #f0b429;
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.28);
}

.theme--dark .jr-node-card.done {
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.22);
}

.theme--dark .jr-node-card:hover {
    border-color: #5c6570;
}

.theme--dark .jr-node-card.current:not(.done):hover {
    border-color: #f5c14d;
}

.theme--dark .jr-node-card.done:hover {
    border-color: #6ee7a0;
}

.theme--dark .react-flow__node.selected .jr-node-card {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25);
}

.theme--dark .jr-link-card {
    background: #1b1f26;
    border-color: #2a2f38;
}

.theme--dark .jr-link-card .row .jr-link-title-wrap > .jr-link-title-plain {
    color: #c9d1d9;
}

.theme--dark .jr-link-card .row .jr-link-title-wrap > a {
    color: #58a6ff;
}

.theme--dark .jr-link-ps-icon {
    color: #8b9cb8;
    background: linear-gradient(145deg, #2a3140, #232a36);
}

.theme--dark .jr-link-ps-thumb {
    background: rgba(255, 255, 255, 0.08);
}

.theme--dark .jr-link-desc .jr-link-desc-md-a {
    color: #58a6ff;
}