.studio-run-page { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .studio-run-preview__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); font-size: 0.75rem; color: var(--color-text-muted); } .studio-run-preview__character { color: var(--color-text-secondary); } .studio-run-tool-option.is-selected { border-color: var(--color-accent); background: var(--color-accent-ultra-light); } .studio-run-tool-copy { margin-top: var(--spacing-sm); display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-tool-copy__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .studio-run-tool-copy__label { font-size: 0.72rem; color: var(--color-text-muted); } .studio-run-tool-copy__btn { padding: 2px var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.72rem; cursor: pointer; font-family: inherit; } .studio-run-tool-copy__btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .studio-run-tool-copy__textarea { width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-primary); color: var(--color-text-primary); font-size: 0.78rem; font-family: inherit; line-height: 1.45; resize: vertical; } .studio-run-tool-copy__hint { font-size: 0.68rem; color: var(--color-accent); } [data-color-theme='dark'] .studio-run-message.role-assistant, [data-color-theme='dark'] .studio-run-message.role-system { background-color: rgba(45, 45, 48, 0.5); color: var(--color-text-primary); } [data-color-theme='dark'] .studio-run-message.role-user { background: rgba(212, 167, 106, 0.1); } [data-color-theme='dark'] .studio-run-icon-btn, [data-color-theme='dark'] .studio-run-tool-option { background: var(--color-bg-tertiary); color: var(--color-text-primary); border-color: var(--color-border); } [data-color-theme='dark'] .studio-run-list-item { background: var(--color-bg-tertiary); } [data-color-theme='dark'] .studio-run-list-action { background: var(--color-bg-elevated); color: var(--color-text-secondary); } [data-color-theme='dark'] .studio-run-product-main__body, [data-color-theme='dark'] .studio-run-variables__row, [data-color-theme='dark'] .studio-run-guidance-form { background: var(--color-bg-tertiary); border-color: var(--color-border); } [data-color-theme='dark'] .studio-run-form-input, [data-color-theme='dark'] .studio-run-insertion-entry, [data-color-theme='dark'] .studio-run-tool-carousel { background: var(--color-bg-elevated); color: var(--color-text-primary); } [data-color-theme='dark'] .studio-run-banner.error { background: rgba(239, 68, 68, 0.15); color: #f87171; } .studio-run-banner { padding: var(--spacing-sm) var(--spacing-lg); font-size: 0.8rem; flex-shrink: 0; } .studio-run-banner.error { background: rgba(220, 53, 69, 0.12); color: #dc3545; } /* Three-column body: 左(列表+进度 / 产物)· 中(预览/对话)· 右(插入+控制) */ .studio-run-body { flex: 1; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(240px, 300px); gap: 0; min-height: 0; overflow: hidden; transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* 与聊天页共用 AppLayoutSlice.sidebarMode:固定 / 智能 / 扩展 */ .studio-run-body.studio-run-sidebar-expanded { grid-template-columns: minmax(420px, 500px) minmax(0, 1fr) minmax(240px, 300px); } .studio-run-body.studio-run-sidebar-smart:not(.studio-run-sidebar-expanded) { grid-template-columns: minmax(48px, 56px) minmax(0, 1fr) minmax(240px, 300px); } .studio-run-body.studio-run-sidebar-smart:not(.studio-run-sidebar-expanded) .studio-run-left-content { opacity: 0; pointer-events: none; } .studio-run-body.studio-run-sidebar-smart.studio-run-sidebar-expanded .studio-run-left { box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2); z-index: 2; } .studio-run-left { min-height: 0; overflow: hidden; padding: var(--spacing-md); border-right: 1px solid var(--color-border-light); background: var(--color-bg-subtle); display: flex; flex-direction: column; gap: var(--spacing-sm); transition: width 0.2s ease, opacity 0.2s ease; } .studio-run-left-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .studio-run-left-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--spacing-md); overflow: hidden; } .studio-run-left-stack__sessions { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); max-height: 42%; min-height: 120px; overflow: auto; } .studio-run-left-stack__progress { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); overflow: hidden; } .studio-run-left-stack__progress .studio-run-graph { flex: 1; min-height: 220px; height: auto; } .studio-run-left-session { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--spacing-md); overflow: auto; } .studio-run-center { min-height: 0; display: flex; flex-direction: column; background: var(--color-bg-subtle); overflow: hidden; } .studio-run-right { min-height: 0; overflow: auto; padding: var(--spacing-md); border-left: 1px solid var(--color-border-light); background: var(--color-bg-secondary); display: flex; flex-direction: column; gap: var(--spacing-md); } .studio-run-section-title { margin: 0 0 var(--spacing-sm); font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary); } .studio-run-left-progress { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); } .studio-run-left-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); text-align: center; } .studio-run-left-section { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); } .studio-run-body.in-session { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 320px); } .studio-run-body.in-session.studio-run-sidebar-expanded { grid-template-columns: minmax(400px, 480px) minmax(0, 1fr) minmax(260px, 320px); } .studio-run-body.in-session.studio-run-sidebar-smart:not(.studio-run-sidebar-expanded) { grid-template-columns: minmax(48px, 56px) minmax(0, 1fr) minmax(260px, 320px); } .studio-run-body.in-session .studio-run-left .studio-run-product-main { flex: 1; min-height: 0; padding: 0; } .studio-run-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .studio-run-preview-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); } .studio-run-preview__header { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-light); background: var(--color-bg-primary); } .studio-run-preview__title-row { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; min-width: 0; } .studio-run-preview__title { margin: 0; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-run-preview__body { flex: 1; min-height: 0; overflow: auto; padding: var(--spacing-md) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); } .studio-run-preview-section { display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-product-main--compact { padding: 0; } .studio-run-product-main--compact .studio-run-product-main__body { max-height: 280px; } .studio-run-variables { margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .studio-run-variables__row { display: grid; grid-template-columns: minmax(100px, 140px) 1fr; gap: var(--spacing-sm); font-size: 0.78rem; padding: var(--spacing-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-primary); } .studio-run-variables__row dt { margin: 0; color: var(--color-text-muted); word-break: break-all; } .studio-run-variables__row dd { margin: 0; color: var(--color-text-primary); white-space: pre-wrap; line-height: 1.45; } .studio-run-overview--inline div { grid-template-columns: 56px 1fr; } .studio-run-enter-btn { flex-shrink: 0; padding: var(--spacing-xs) var(--spacing-lg); border: none; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .studio-run-enter-btn--header { margin-left: auto; } .studio-run-enter-btn:disabled { opacity: 0.5; cursor: not-allowed; } .studio-run-exit-session-btn { padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-size: 0.875rem; cursor: pointer; } .studio-run-product-main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: var(--spacing-md); gap: var(--spacing-sm); } .studio-run-product-main__head { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; } .studio-run-product-main__head .studio-run-section-title { margin: 0; } .studio-run-product-main__step { font-size: 0.75rem; color: var(--color-text-muted); padding: 2px 8px; border-radius: 999px; background: var(--color-bg-tertiary); } .studio-run-product-main__body { flex: 1; margin: 0; min-height: 0; overflow: auto; padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-primary); font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; } .studio-run-insertion-entry { width: 100%; text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-tertiary); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; } .studio-run-insertion-entry:hover { border-color: var(--color-accent); } .studio-run-insertion-entry__key { font-size: 0.85rem; font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-run-insertion-entry__meta { font-size: 0.7rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-run-overview { margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .studio-run-overview div { display: grid; grid-template-columns: 72px 1fr; gap: var(--spacing-xs); font-size: 0.78rem; } .studio-run-overview dt { margin: 0; color: var(--color-text-muted); } .studio-run-overview dd { margin: 0; color: var(--color-text-primary); } .studio-run-right-graph { flex-shrink: 0; } .studio-run-hint--inline { margin: 0 0 var(--spacing-sm); } .studio-run-chat-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Chat messages */ .studio-run-chat-messages { flex: 1; overflow-y: auto; padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); min-height: 0; } .studio-run-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.9rem; } .studio-run-message { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); line-height: 1.6; } .studio-run-message.role-user { align-self: flex-end; max-width: 85%; background: linear-gradient(to right, rgba(102, 126, 234, 0.08), rgba(102, 126, 234, 0.15)); border-left: 3px solid var(--color-accent); } .studio-run-message.role-assistant, .studio-run-message.role-system { align-self: stretch; background: rgba(255, 255, 255, 0.6); border-left: 3px solid transparent; } .studio-run-message-role { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: var(--spacing-xs); } .studio-run-message-body { font-size: 0.95rem; white-space: pre-wrap; } .studio-run-chat-card { flex: 1; overflow: auto; padding: var(--spacing-lg); display: flex; justify-content: center; } .studio-run-chat-card .studio-run-guidance-form { max-width: 480px; width: 100%; } .studio-run-chat-input-bar { flex-shrink: 0; display: flex; align-items: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border-light); background: var(--color-bg-primary); } .studio-run-chat-input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); color: var(--color-text-primary); font-family: inherit; font-size: 0.95rem; resize: none; min-height: 40px; max-height: 160px; } .studio-run-chat-input:focus { outline: none; border-color: var(--color-accent); } .studio-run-chat-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 1.2rem; cursor: pointer; } .studio-run-chat-send:disabled { opacity: 0.4; cursor: not-allowed; } /* Right rail */ .studio-run-right-section { display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-right-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .studio-run-right-head .studio-run-section-title { margin: 0; } .studio-run-expand-btn { padding: 2px 8px; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: transparent; font-size: 0.7rem; color: var(--color-text-muted); cursor: pointer; } .studio-run-thumb { width: 100%; text-align: left; padding: var(--spacing-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-tertiary); cursor: pointer; font-family: inherit; } .studio-run-thumb-label { display: block; font-size: 0.65rem; color: var(--color-text-muted); margin-bottom: 2px; } .studio-run-thumb-value { display: block; font-size: 0.8rem; color: var(--color-text-primary); line-height: 1.4; } .studio-run-thumb-meta { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-top: 4px; } .studio-run-right-full { margin: 0; padding: var(--spacing-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-tertiary); font-size: 0.75rem; white-space: pre-wrap; max-height: 240px; overflow: auto; } .studio-run-right-placeholder { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); } .studio-run-next-btn { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .studio-run-next-btn:disabled { opacity: 0.5; cursor: not-allowed; } .studio-run-turn-actions__row { display: flex; gap: var(--spacing-xs); } .studio-run-turn-btn { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .studio-run-turn-btn:hover:not(:disabled) { background: var(--color-bg-tertiary); border-color: var(--color-border); } .studio-run-turn-btn:disabled { opacity: 0.45; cursor: not-allowed; } .studio-run-turn-btn--reroll { border-color: var(--color-accent); color: var(--color-accent); } .studio-run-turn-btn--reroll:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-secondary)); } .studio-run-turn-btn.is-confirm-pending { border-color: #f5576c; background: color-mix(in srgb, #f5576c 12%, var(--color-bg-secondary)); color: #f5576c; animation: studio-run-confirm-pulse 1.2s infinite; } @keyframes studio-run-confirm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .studio-run-stub-note { margin: 0; font-size: 0.65rem; color: var(--color-text-muted); } /* Tool carousel */ .studio-run-tool-carousel { padding: var(--spacing-sm); border-radius: var(--radius-md); border: 1px dashed var(--color-border); background: var(--color-bg-tertiary); } .studio-run-tool-carousel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); } .studio-run-tool-carousel__label { font-size: 0.75rem; font-weight: 600; } .studio-run-tool-carousel__pager { font-size: 0.7rem; color: var(--color-text-muted); } .studio-run-tool-carousel__question { margin: 0 0 var(--spacing-sm); font-size: 0.8rem; line-height: 1.4; } .studio-run-tool-carousel__nav { display: flex; align-items: stretch; gap: var(--spacing-xs); } .studio-run-icon-btn { width: 28px; flex-shrink: 0; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-secondary); cursor: pointer; font-size: 1.1rem; line-height: 1; } .studio-run-tool-carousel__options { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-tool-option { padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-secondary); font-size: 0.75rem; text-align: left; cursor: pointer; } .studio-run-tool-option:hover { border-color: var(--color-accent); } /* Shared / list / form */ .studio-run-hint { margin: 0 0 var(--spacing-sm); font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.4; } .studio-run-empty { padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px dashed var(--color-border); color: var(--color-text-muted); font-size: 0.8rem; background: var(--color-bg-secondary); } .studio-run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-list.is-collapsed { overflow-y: auto; overflow-x: hidden; } .studio-run-list-row { display: flex; align-items: stretch; gap: 4px; min-height: 48px; } .studio-run-list-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); padding: var(--spacing-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-secondary); cursor: pointer; text-align: left; font-family: inherit; color: var(--color-text-primary); } .studio-run-list-item-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .studio-run-list-action { width: 26px; height: 22px; padding: 0; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-secondary); font-size: 0.7rem; cursor: pointer; line-height: 1; } .studio-run-list-action:hover { border-color: var(--color-accent); } .studio-run-list-action--danger:hover { border-color: #ef4444; color: #ef4444; } .studio-run-list-name { font-size: 0.78rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .studio-run-list-fold { width: 100%; margin-top: var(--spacing-xs); padding: var(--spacing-xs); border: 1px dashed var(--color-border-light); border-radius: var(--radius-sm); background: transparent; font-size: 0.7rem; color: var(--color-text-muted); cursor: pointer; } .studio-run-list-fold:hover { border-color: var(--color-accent); color: var(--color-text-primary); } .studio-run-rename-form { flex: 1; display: flex; flex-direction: column; gap: 4px; } .studio-run-rename-input { width: 100%; padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); font-size: 0.78rem; font-family: inherit; background: var(--color-bg-secondary); color: var(--color-text-primary); } .studio-run-rename-actions { display: flex; gap: 4px; } .studio-run-prompt-debug { flex-shrink: 0; border-top: 1px solid var(--color-border-light); padding-top: var(--spacing-sm); } .studio-run-prompt-debug__toggle { width: 100%; padding: var(--spacing-xs) var(--spacing-sm); border: 1px dashed var(--color-border-light); border-radius: var(--radius-sm); background: transparent; font-size: 0.72rem; color: var(--color-text-muted); cursor: pointer; text-align: left; font-family: inherit; } .studio-run-prompt-debug__list { margin-top: var(--spacing-xs); display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-prompt-debug__item { width: 100%; padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-primary); font-size: 0.72rem; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-xs); text-align: left; color: var(--color-text-primary); } .studio-run-prompt-debug__item:hover { border-color: var(--color-accent); background: var(--color-bg-secondary); } .studio-run-prompt-debug__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-run-prompt-debug__source { flex-shrink: 0; font-size: 0.65rem; color: var(--color-text-muted); } .studio-run-list-item:hover { border-color: var(--color-border); } .studio-run-list-item.selected { border-color: var(--color-accent); background: rgba(var(--color-accent-rgb, 59, 130, 246), 0.08); } .studio-run-list-time { font-size: 0.75rem; color: var(--color-text-muted); } .studio-run-status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 500; } .studio-run-status-badge.status-running { background: rgba(59, 130, 246, 0.15); color: #3b82f6; } .studio-run-status-badge.status-pending { background: rgba(156, 163, 175, 0.2); color: var(--color-text-muted); } .studio-run-status-badge.status-completed { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .studio-run-status-badge.status-failed { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .studio-run-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .studio-run-nodes--compact { gap: var(--spacing-xs); } .studio-run-node { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .studio-run-node.status-active { border-color: var(--color-accent); } .studio-run-node-name { font-size: 0.85rem; font-weight: 500; } .studio-run-node-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.65rem; font-weight: 500; flex-shrink: 0; } .studio-run-node-badge.status-pending { background: rgba(156, 163, 175, 0.2); color: var(--color-text-muted); } .studio-run-node-badge.status-active { background: rgba(59, 130, 246, 0.15); color: #3b82f6; } .studio-run-node-badge.status-completed { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .studio-run-node-badge.status-skipped { background: rgba(156, 163, 175, 0.12); color: var(--color-text-muted); } .studio-run-guidance-form { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background: var(--color-bg-secondary); } .studio-run-guidance-form--compact { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .studio-run-form-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .studio-run-form-label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-primary); } .studio-run-required { color: #dc3545; margin-left: 2px; } .studio-run-form-input { padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-tertiary); color: var(--color-text-primary); font-size: 0.875rem; font-family: inherit; } .studio-run-form-input.has-error { border-color: #dc3545; } .studio-run-form-input:disabled { opacity: 0.6; cursor: not-allowed; } .studio-run-field-error { font-size: 0.75rem; color: #dc3545; } .studio-run-submit-btn { align-self: flex-start; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); border: none; background: var(--color-accent); color: var(--color-text-inverse, #fff); font-size: 0.875rem; cursor: pointer; } .studio-run-submit-btn:hover:not(:disabled) { opacity: 0.9; } .studio-run-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 960px) { .studio-run-body:not(.studio-run-sidebar-smart) { grid-template-columns: 0 minmax(0, 1fr) 260px; } }