:root { color-scheme: light dark; }
.console-projects { display: grid; gap: 16px; }
.console-project { padding: 16px; border: 1px solid #8884; border-radius: 8px; overflow-wrap: anywhere; }
.console-project h3 { margin-top: 0; }
body { margin: 0; font: 15px/1.6 system-ui, "Microsoft YaHei", sans-serif; }
header { padding: 16px 24px; border-bottom: 1px solid #8884; }
header h1 { margin: 0; font-size: 20px; }
header .sub { margin: 2px 0 0; opacity: .6; font-size: 13px; }
main { padding: 24px; max-width: 960px; }
section { margin-bottom: 32px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #8883; }
form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.lifecycle-control form { display: block; }
.lifecycle-control form label { width: 100%; margin-bottom: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
input { padding: 6px 8px; }
button { padding: 6px 14px; cursor: pointer; }
.empty, .hint, .meta { opacity: .7; font-size: 13px; }
.error { color: #b00020; font-weight: 600; }
.ok { color: #0a7a3d; font-weight: 600; }
.findings { list-style: none; padding: 0; }
.findings li { padding: 10px 12px; margin-bottom: 8px;
  border-left: 4px solid #999; background: #8881; }
.findings li.block { border-left-color: #b00020; }
.findings li.warn { border-left-color: #c77700; }
.badge { display: inline-block; padding: 1px 8px; margin-right: 8px;
  border-radius: 10px; background: #8883; font-size: 12px; }
.findings em { display: block; margin-top: 4px; opacity: .65; font-size: 12px; }
.queue { padding: 10px 12px; background: #1677ff18; border-left: 4px solid #1677ff; }
.red-flags { padding: 12px; border: 2px solid #b00020; background: #b0002010; }
.red-flags h3 { margin-top: 0; }
.red-flag { color: #b00020; font-weight: 600; }
.red-flag.blocking { padding: 8px; background: #b0002020; }
.preview-group { margin: 12px 0; border: 1px solid #8884; border-radius: 6px; }
.preview-group > summary { cursor: pointer; padding: 12px; font-weight: 700; }
.preview-group.decision > summary { color: #b00020; }
.diff-item { padding: 10px 14px; border-top: 1px solid #8883; }
.diff-item p { margin: 4px 0 0 24px; }
.field-change { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.summary-line { padding: 0 14px 10px; font-weight: 600; }
button:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 600px) { main { padding: 12px; } form { flex-direction: column; } }

/* ---- 中控台（1C-2） ---- */
.dashboard { max-width: 1200px; }
.dashboard h2 { font-size: 15px; opacity: .85; margin-bottom: 12px; }

.freshness-gate p { margin: 0; padding: 10px 14px; border-radius: 8px;
  background: #8882; font-weight: 600; }
.freshness-gate p.error { background: #b0002014; }

.kpi-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.kpi-card { flex: 1 1 140px; padding: 14px 16px; border-radius: 10px;
  background: #8881; border: 1px solid #8883; }
.kpi-card .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.kpi-card .kpi-label { font-size: 12px; opacity: .65; margin-top: 2px; }
.kpi-card.alert { background: #b0002012; border-color: #b0002040; }
.kpi-card.alert .kpi-value { color: #b00020; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; }
.project-card { border-radius: 10px; border: 1px solid #8883; border-left: 5px solid #999;
  padding: 14px 16px; }
.project-card.health-red { border-left-color: #b00020; }
.project-card.health-yellow { border-left-color: #c77700; }
.project-card.health-green { border-left-color: #0a7a3d; }
.project-card .card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; }
.project-card .card-head h3 { margin: 0; font-size: 16px; }
.project-card .health-badge { font-size: 18px; }
.project-card .card-row { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 4px 0; border-top: 1px solid #8882; }
.project-card .card-row:first-of-type { border-top: none; }
.project-card .card-row .label { opacity: .6; }
.project-card .card-row .value { text-align: right; }
.project-card .card-row .value.warn { color: #c77700; font-weight: 600; }
.progress-track { height: 8px; border-radius: 4px; background: #8883; overflow: hidden;
  margin: 8px 0 10px; }
.progress-fill { height: 100%; background: #1677ff; border-radius: 4px; }

.todo-list { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: 8px; }
.todo-list li { padding: 10px 14px; border-radius: 8px; background: #8881;
  border-left: 4px solid #999; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.todo-list li.level-0 { border-left-color: #b00020; background: #b0002010; }
.todo-list li.level-1 { border-left-color: #c77700; background: #c7770010; }
.todo-list li.level-2 { border-left-color: #8886; }
.todo-list .todo-kind { font-size: 11px; padding: 1px 7px; border-radius: 8px;
  background: #8883; opacity: .8; flex-shrink: 0; }
.todo-list .todo-text { flex: 1 1 auto; min-width: 0; }
.todo-list .todo-project { font-size: 12px; opacity: .55; flex-shrink: 0; }

/* ---- 1C-3：里程碑泳道图 ---- */
.swimlane { overflow-x: auto; border: 1px solid #8883; border-radius: 10px;
  padding: 8px 0; }
.swimlane-row { display: flex; align-items: stretch; min-width: 640px; }
.swimlane-label { flex: 0 0 130px; padding: 10px 12px; font-size: 13px;
  font-weight: 600; display: flex; align-items: center;
  border-right: 1px solid #8883; }
.swimlane-track { position: relative; flex: 1 1 auto; min-height: 44px; }
.swimlane-header .swimlane-track { min-height: 22px; }
.swimlane-month { position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; opacity: .55; white-space: nowrap; }
.swimlane-gridline { position: absolute; top: 0; bottom: 0; width: 1px;
  background: #8882; }
.swimlane-row:not(.swimlane-header) { border-top: 1px solid #8882; }
.swimlane-marker { position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.swimlane-marker::before { content: ""; width: 12px; height: 12px;
  border-radius: 50%; background: #1677ff; border: 2px solid var(--bg, #fff); }
.swimlane-marker.no-baseline::before { background: #999; }
.swimlane-marker.collision::before { background: #b00020;
  box-shadow: 0 0 0 3px #b0002030; }
.swimlane-marker-label { font-size: 10px; opacity: .75; white-space: nowrap;
  transform: translateY(2px); }
@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } }

/* ---- 单项目专业泳道图（Gate/依赖版） ---- */
.pswim-header { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 16px; margin: 16px 0 24px; padding: 12px 16px; border-radius: 10px;
  background: #8881; }
.pswim-header-title { font-size: 17px; font-weight: 700; }
.pswim-header-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; opacity: .85; }

.pswim { overflow-x: auto; border: 1px solid #8883; border-radius: 10px; }
.pswim-row { display: flex; align-items: stretch; min-width: 720px; }
.pswim-label { flex: 0 0 110px; padding: 8px 10px; font-size: 12px;
  font-weight: 600; display: flex; align-items: center;
  border-right: 1px solid #8883; background: #8881; }
.pswim-track { position: relative; flex: 1 1 auto; min-height: 46px; }
.pswim-months-row .pswim-track { min-height: 24px; border-bottom: 1px solid #8883; }
.pswim-month { position: absolute; top: 4px; transform: translateX(-50%);
  font-size: 11px; opacity: .55; white-space: nowrap; }

.pswim-body { position: relative; padding-top: 36px; }
.pswim-body .pswim-row:not(:last-child) { border-bottom: 1px solid #8882; }
/* 参照宽度必须跟 .pswim-track 一致（让出左边110px的泳道名称列），
   Gate竖线/今天线/依赖线SVG 全部挂在这层下面，同一个百分比才会跟
   月份刻度、里程碑节点落在同一条竖线上。 */
.pswim-overlay { position: absolute; top: 36px; left: 110px; right: 0; bottom: 0; }
.pswim-gate-line, .pswim-today-line { position: absolute; top: 0; bottom: 0;
  width: 2px; z-index: 2; }
.pswim-gate-line { background: #1677ff60; }
.pswim-gate-label { position: absolute; top: -32px; left: 6px; font-size: 14px;
  font-weight: 700; color: #1677ff; white-space: nowrap; }
.pswim-today-line { background: #b0002080; }
.pswim-today-label { position: absolute; top: -32px; left: 6px; font-size: 14px;
  font-weight: 700; color: #b00020; white-space: nowrap; }

/* SVG 用 0 0 100 100 的正方形 viewBox 配合 preserveAspectRatio="none"
   把坐标拉伸到实际（很宽很矮的）容器上——斜线在这种非等比缩放下描边
   粗细会跟着角度不均匀变形，看起来像一坨放射状的东西。模板里改成只画
   横线+竖线（直角折线）：纯水平/纯垂直的线不受非等比缩放影响，形状
   始终干净，所以这里不需要虚线也不需要额外补偿。 */
.pswim-deps { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.pswim-deps line { stroke: #8887; }
.pswim-deps marker path { fill: #8887; }

.pswim-node { position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: flex; align-items: center; gap: 4px; background: none;
  border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px;
  font: inherit; color: inherit; }
.pswim-node:hover { background: #8882; }
.pswim-node::before { content: "◐"; font-size: 13px; flex-shrink: 0; }
.pswim-node.status-done::before { content: "✅"; }
.pswim-node.status-not_started::before { content: "◇"; opacity: .6; }
.pswim-node.status-delayed::before { content: "🔴"; }
.pswim-node.status-at_risk::before { content: "⚠️"; }
.pswim-node-label { font-size: 11px; white-space: nowrap; }

.pswim-detail { position: fixed; right: 24px; bottom: 24px; width: 280px;
  max-width: calc(100vw - 48px); background: Canvas; color: CanvasText;
  border: 1px solid #8886; border-radius: 12px; padding: 16px;
  box-shadow: 0 8px 24px #00000030; z-index: 10; }
.pswim-detail-close { position: absolute; top: 8px; right: 10px; border: none;
  background: none; font-size: 16px; cursor: pointer; color: inherit; opacity: .6; }
.pswim-detail h3 { margin: 0 0 4px; font-size: 15px; }
.pswim-detail-row { display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 5px 0; border-top: 1px solid #8882; }
.pswim-detail-row:first-of-type { border-top: none; }
.pswim-detail-row .label { opacity: .6; flex-shrink: 0; }
@media (max-width: 600px) { .pswim-detail { left: 16px; right: 16px; width: auto; } }

/* ---- 1C-4：单项目三轨甘特 ---- */
.gantt-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-bottom: 10px; font-size: 13px; }
.gantt-toolbar label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.gantt { overflow-x: auto; overflow-y: auto; max-height: 70vh;
  border: 1px solid #8883; border-radius: 10px; }
.gantt-row { display: flex; align-items: stretch; min-width: 760px;
  border-bottom: 1px solid #8882; }
.gantt-header-row { position: sticky; top: 0; z-index: 4; background: Canvas;
  border-bottom: 1px solid #8883; }
.gantt-label { flex: 0 0 240px; padding: 6px 10px 6px 0; font-size: 12px;
  display: flex; align-items: center; gap: 4px; border-right: 1px solid #8883;
  background: Canvas; position: sticky; left: 0; z-index: 2; min-width: 0; }
.gantt-toggle { border: none; background: none; cursor: pointer; font-size: 11px;
  color: inherit; opacity: .7; padding: 0 2px; flex-shrink: 0; }
.gantt-toggle-spacer { width: 15px; flex-shrink: 0; display: inline-block; }
.gantt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; }
.gantt-name:hover { text-decoration: underline; }
.gantt-owner { font-size: 11px; opacity: .55; flex-shrink: 0; white-space: nowrap; }
.gantt-track { position: relative; flex: 1 1 auto; min-height: 30px; }
.gantt-header-row .gantt-track { min-height: 22px; }
.gantt-month { position: absolute; top: 4px; transform: translateX(-50%);
  font-size: 11px; opacity: .55; white-space: nowrap; }
.gantt-bar { position: absolute; height: 6px; border-radius: 3px; min-width: 2px; }
.gantt-bar-baseline { top: 4px; background: #8886; }
.gantt-bar-forecast { top: 13px; background: #1677ff; }
.gantt-bar-declared { top: 22px; background: #c77700; }
.gantt-row.gantt-highlight { background: #1677ff14; }
.gantt-row.gantt-highlight .gantt-label { background: #1677ff14; }
@media (max-width: 600px) { .gantt-label { flex-basis: 160px; } }
