.subagent-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-5) var(--spacing-6) var(--spacing-8);
    overflow-y: auto;
}

.subagent-notice,
.subagent-flow-overview article,
.subagent-config,
.subagent-results,
.subagent-implementation-notes {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
}

.subagent-notice {
    padding: var(--spacing-4) var(--spacing-5);
    border-left: 4px solid #d97706;
    color: var(--color-text-secondary);
}

.subagent-notice strong { color: #9a5700; }
.subagent-notice p { margin: var(--spacing-2) 0 0; line-height: 1.6; }

.subagent-flow-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.subagent-flow-overview article { padding: var(--spacing-4); }
.subagent-flow-overview article > span { color: var(--color-primary); font: 700 12px ui-monospace, monospace; }
.subagent-flow-overview article strong { display: block; margin-top: 6px; }
.subagent-flow-overview article p { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }

.subagent-workbench {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: var(--spacing-4);
    align-items: start;
}

.subagent-config,
.subagent-results,
.subagent-implementation-notes { padding: var(--spacing-5); }
.subagent-config h2,
.subagent-results h2,
.subagent-implementation-notes h2 { margin: 0 0 var(--spacing-4); font-size: 16px; }
.subagent-config > label { display: block; margin-bottom: var(--spacing-3); color: var(--color-text-secondary); font-size: 13px; }
.subagent-config .settings-input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.subagent-config textarea.settings-input { min-height: 64px; padding: var(--spacing-3); line-height: 1.5; resize: vertical; }
.subagent-actions { display: flex; gap: var(--spacing-2); flex-wrap: wrap; margin-top: var(--spacing-4); }

.subagent-result-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); }
.subagent-result-heading h2 { margin-bottom: var(--spacing-3); }
#subagentSimulationStatus { color: var(--color-text-secondary); font-size: 12px; }
.subagent-timeline { display: flex; flex-direction: column; gap: var(--spacing-2); margin: 0 0 var(--spacing-5); padding: 0; list-style: none; }
.subagent-timeline:empty::before { content: '运行模拟后显示逐步时序'; color: var(--color-text-muted); font-size: 13px; }
.subagent-timeline li { padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-page); }
.subagent-timeline li strong { display: block; margin-bottom: 4px; font-size: 13px; }
.subagent-timeline li span { color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.subagent-protocol { max-height: 420px; overflow: auto; margin: 0; padding: var(--spacing-4); border-radius: var(--radius-md); background: #171923; color: #d9e2f2; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.subagent-implementation-notes ol { display: grid; gap: var(--spacing-3); margin: 0; padding-left: 22px; color: var(--color-text-secondary); line-height: 1.65; }
.subagent-implementation-notes strong { color: var(--color-text-primary); }

@media (max-width: 900px) {
    .subagent-workbench { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .subagent-page { padding: var(--spacing-3); }
    .subagent-flow-overview { grid-template-columns: 1fr; }
    .subagent-config, .subagent-results, .subagent-implementation-notes { padding: var(--spacing-4); }
}