Add overview workflow guidance

frontend/src/styles/app.css

@@ -835,6 +835,62 @@ section li strong + div {
   align-self: stretch;
 }
 
+.workflow-guidance-panel {
+  display: grid;
+  gap: 0.72rem;
+  border-left: 4px solid #2563eb;
+  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+}
+
+.workflow-guidance-panel .panel-title-row {
+  margin-bottom: 0;
+}
+
+.workflow-guidance-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  gap: 0.55rem;
+}
+
+.workflow-guidance-step {
+  display: grid;
+  align-content: start;
+  gap: 0.28rem;
+  min-height: 5.35rem;
+  border-color: var(--line);
+  padding: 0.62rem 0.68rem;
+  background: #ffffff;
+  text-align: left;
+  box-shadow: none;
+}
+
+.workflow-guidance-step small {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.workflow-guidance-step-active {
+  border-color: rgba(15, 118, 110, 0.46);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
+}
+
+.workflow-guidance-step-ready {
+  border-color: rgba(21, 128, 61, 0.28);
+  background: #f2fbf5;
+}
+
+.workflow-step-status {
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
 .overview-actions {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);