.page-main { flex:1; min-width:0; }
.flow-tabs { display:flex; gap:4px; border-bottom:1px solid var(--color-border); margin:14px 0 12px; }
.flow-tabs button { border:0; background:none; color:var(--color-muted); padding:7px 14px; cursor:pointer; }
.flow-tabs button.active { background:var(--color-surface); color:var(--color-accent); border:1px solid var(--color-border); border-bottom:0; border-radius: var(--radius-sm) 7px 0 0; font-weight:600; }
.flow-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.flow-chip, .flow-action { cursor:pointer; background:var(--color-surface); border:1px solid var(--color-border); padding:5px 11px; border-radius: var(--radius-lg1); color:var(--color-fg); }
.flow-chip.active { background:var(--color-accent); color:white; border-color:var(--color-accent); }
.flow-action { border-radius: var(--radius-4); }
.flow-card { padding:14px; overflow:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); }
.flow-diagram { overflow:auto; text-align:center; }
.flow-diagram svg { max-width:none; }
.flow-legend, .flow-source { color:var(--color-muted); font-size: var(--fs-5); margin-top:8px; }
.flow-legend { display:flex; flex-wrap:wrap; gap:14px; }
.flow-generated { display:inline-block; font-size: var(--fs-4); background:var(--color-warn-bg); color:var(--color-badge-client); border-radius: var(--radius-md); padding:2px 8px; margin:8px 0; }