.plan-wrap { overflow-x: auto; }
svg.plan { display: block; font-family: var(--font-ui); font-size: 12px; }
svg.plan .lane { fill: var(--panel); opacity: 0.55; }
svg.plan .lane-label { fill: var(--text-2); font-weight: 600; }
svg.plan .week { stroke: var(--line); stroke-width: 1; }
svg.plan .week-label { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
svg.plan .bar { stroke: var(--accent); stroke-width: 1.5; fill: var(--bg); }
svg.plan .done .bar { fill: var(--accent); }
svg.plan .at-risk .bar { stroke: var(--attention); }
svg.plan .done.at-risk .bar { fill: var(--attention); }
svg.plan .milestone { fill: var(--accent); stroke: var(--accent); }
svg.plan .planned .milestone { fill: var(--bg); }
svg.plan .at-risk .milestone { stroke: var(--attention); }
svg.plan .bar-label { fill: var(--text); }
svg.plan .mark { font-size: 10px; font-weight: 600; fill: var(--text-2); }
svg.plan .mark-risk { fill: var(--attention-text); }
svg.plan .mark-positive { fill: var(--accent); }
svg.plan .today { stroke: var(--attention); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.plan .today-label { fill: var(--attention-text); font-size: 10px; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); margin: 6px 0; }