:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #f6f8fc; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; }
.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 56px; }
header, .results-heading, .button-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header { margin-bottom: 24px; }
h1 { margin: 4px 0 8px; font-size: clamp(1.75rem, 4vw, 2.4rem); }
h2 { margin: 0 0 14px; font-size: 1.1rem; }
.eyebrow { margin: 0; color: #4f46e5; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.muted, .hint { color: #5b667b; font-size: .9rem; }
.card { margin-top: 18px; padding: 20px; border: 1px solid #dce2ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(31, 45, 75, .05); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-form { margin-top: 14px; }
.context-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
label { display: grid; gap: 6px; color: #34405a; font-size: .85rem; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #cbd4e5; border-radius: 9px; padding: 10px 11px; color: #172033; background: #fff; font: inherit; }
textarea { resize: vertical; }
button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; border: 0; border-radius: 9px; padding: 9px 13px; cursor: pointer; color: #fff; background: #4f46e5; font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; }
button:hover { background: #4338ca; }
button:disabled { cursor: not-allowed; opacity: .55; }
.secondary-button { border: 1px solid #cbd4e5; color: #334155; background: #fff; }
.secondary-button:hover { background: #f1f5f9; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.list { margin-top: 14px; display: grid; gap: 8px; }
.list.empty { color: #64748b; font-size: .9rem; }
.child-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px; font-size: .88rem; }
.child-row small { display: block; color: #64748b; margin-top: 2px; }
.child-row button { min-height: 31px; padding: 5px 9px; }
details { margin-top: 16px; }
summary { cursor: pointer; color: #4338ca; font-weight: 700; }
.status { margin: 12px 0; border-radius: 8px; padding: 10px; background: #eef2ff; color: #3730a3; font-size: .88rem; }
.status.error { background: #fff1f2; color: #be123c; }
pre { max-height: 440px; overflow: auto; margin: 0; border-radius: 10px; padding: 16px; background: #0f172a; color: #dbeafe; font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
@media (max-width: 760px) { .two-column, .form-grid, .context-grid, .workflow-grid { grid-template-columns: 1fr; } header { align-items: flex-start; flex-direction: column; } }