/* ═══════════════════════════════════════════════════════════════════════════
   TOOL BUILDER STYLES
   FILE: css/toolBuilder.css
   PHASE: 9 - Tool Builder, 9.5 - LLM-Assisted Analysis

   Provides styling for the 10-step tool creation wizard supporting all
   8 tool types with type-specific implementation UIs.

   Phase 9.5 adds styles for LLM-assisted resource analysis UI.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   LAYOUT
   ─────────────────────────────────────────────────────────────────────────── */

.tool-builder-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 120px);
    background: var(--bg-secondary, #f8f9fa);
}

.tool-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 100;
}

.tool-builder-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tool-builder-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.tool-name-badge {
    padding: 0.25rem 0.75rem;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-color, #1976d2);
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

.tool-builder-header .header-right {
    display: flex;
    gap: 0.75rem;
}

.tool-builder-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tool-builder-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.tool-builder-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.tool-builder-footer .footer-left,
.tool-builder-footer .footer-center,
.tool-builder-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.step-indicator {
    color: var(--text-secondary, #666);
    font-size: 0.875rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   STEPPER
   ─────────────────────────────────────────────────────────────────────────── */

.tool-builder-stepper {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    overflow-x: auto;
    gap: 0;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.5rem;
    min-width: 80px;
    transition: all 0.2s ease;
}

.stepper-step:hover {
    background: var(--bg-hover, #f5f5f5);
    border-radius: 8px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-secondary, #666);
    transition: all 0.2s ease;
}

.stepper-step.active .step-number {
    background: var(--primary-color, #1976d2);
    color: white;
}

.stepper-step.completed .step-number {
    background: var(--success-color, #4caf50);
    color: white;
}

.stepper-step.error .step-number {
    background: var(--error-color, #f44336);
    color: white;
}

.step-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    text-align: center;
    white-space: nowrap;
}

.stepper-step.active .step-label {
    color: var(--primary-color, #1976d2);
    font-weight: 500;
}

.stepper-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color, #e0e0e0);
    min-width: 20px;
    max-width: 60px;
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP CONTENT
   ─────────────────────────────────────────────────────────────────────────── */

.step-content {
    max-width: 1000px;
    margin: 0 auto;
}

.step-header {
    margin-bottom: 2rem;
}

.step-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.step-header p {
    margin: 0;
    color: var(--text-secondary, #666);
}

.step-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    text-align: center;
}

.step-error .material-icons {
    font-size: 3rem;
    color: var(--warning-color, #ff9800);
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 1: TOOL TYPE SELECTION
   ─────────────────────────────────────────────────────────────────────────── */

.tool-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.tool-type-card {
    position: relative;
    padding: 1.25rem;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 1rem;
}

.tool-type-card:hover {
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-type-card.selected {
    border-color: var(--primary-color, #1976d2);
    background: var(--primary-light, #e3f2fd);
}

.type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-secondary, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-type-card.selected .type-icon {
    background: var(--primary-color, #1976d2);
    color: white;
}

.type-icon .material-icons {
    font-size: 1.5rem;
}

.type-content {
    flex: 1;
    min-width: 0;
}

.type-content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.type-patient-name {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--primary-color, #1976d2);
    font-style: italic;
}

.type-description {
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

.type-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.examples-label {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin-right: 0.25rem;
}

.example-tag {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 4px;
    color: var(--text-secondary, #666);
}

.selected-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--primary-color, #1976d2);
    font-size: 1.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   FORM SECTIONS
   ─────────────────────────────────────────────────────────────────────────── */

.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.form-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.section-hint {
    margin: -0.5rem 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.styling-note {
    margin: 0 0 1rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 6px;
    font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────────────
   AI FIELD GENERATION
   ─────────────────────────────────────────────────────────────────────────── */

/* Hint banner at top of Step 2 */
.ai-generate-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1px solid #c2dff7;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1565c0;
}

.ai-generate-hint > .material-icons {
    font-size: 1.25rem;
    color: #1976d2;
}

.ai-generate-hint .material-icons.tiny {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Label with AI button container */
.label-with-ai {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.label-with-ai label {
    flex: 1;
}

/* Individual AI generate buttons */
.ai-field-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid #c2dff7;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1976d2;
}

.ai-field-btn:hover:not(:disabled) {
    background: #e3f2fd;
    border-color: #1976d2;
    transform: scale(1.1);
}

.ai-field-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-field-btn.loading {
    background: #e3f2fd;
}

.ai-field-btn .material-icons {
    font-size: 16px;
}

.ai-field-btn .material-icons.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* AI generate with hints container */
.ai-generate-with-hints {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.ai-hints-input {
    flex: 1;
    max-width: 320px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    color: var(--text-secondary, #666);
}

.ai-hints-input::placeholder {
    color: var(--text-muted, #4b5563);
    font-style: italic;
}

.ai-hints-input:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

/* Highlight effect when field is AI-generated */
.ai-generated {
    animation: ai-highlight 2s ease-out;
}

@keyframes ai-highlight {
    0% {
        background-color: #e3f2fd;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group.flex-2 {
    flex: 2;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1a1a1a);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
}

/* Required Badge */
.required-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--error-light, #ffebee);
    color: var(--error-color, #d32f2f);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Attribution Suggestion */
.attribution-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--info-light, #e3f2fd);
    border-radius: 6px;
    border: 1px solid var(--info-color, #2196f3);
}

.suggestion-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--info-dark, #1565c0);
    white-space: nowrap;
}

.suggestion-value {
    flex: 1;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-primary, #fff);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    word-break: break-all;
}

.use-suggestion-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.code-input {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem !important;
    background: var(--bg-code, #f5f5f5) !important;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-option:hover {
    background: var(--bg-hover, #e8e8e8);
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 3: INPUT PARAMETERS
   ─────────────────────────────────────────────────────────────────────────── */

.params-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.toolbar-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.toolbar-hint .material-icons {
    font-size: 1rem;
    color: var(--info-color, #2196f3);
}

.params-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-params {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    color: var(--text-secondary, #666);
    text-align: center;
}

.empty-params .material-icons {
    font-size: 2.5rem;
    opacity: 0.5;
}

.param-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.param-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.param-drag-handle {
    cursor: grab;
    color: var(--text-tertiary, #4b5563);
}

.param-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
}

.param-delete {
    margin-left: auto;
}

.param-body {
    padding: 1rem;
}

.param-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.param-row:last-child {
    margin-bottom: 0;
}

.param-row .form-group {
    flex: 1;
}

/* Parameter name validation error styles */
.param-name-error.field-error {
    display: block;
    color: var(--danger-color, #dc3545);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    min-height: 1rem;
}

.param-name.input-error {
    border-color: var(--danger-color, #dc3545) !important;
    background-color: rgba(220, 53, 69, 0.05);
}

.param-name.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.enum-options-row {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.enum-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.enum-option {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.enum-option input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    font-size: 0.875rem;
}

.enum-option .enum-points {
    width: 80px;
    flex: none;
}

.validation-row,
.scoring-row {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 4: IMPLEMENTATION
   ─────────────────────────────────────────────────────────────────────────── */

.implementation-section {
    max-width: 100%;
}

.method-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.method-selector.horizontal {
    display: flex;
    flex-wrap: wrap;
}

.method-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.method-option:hover {
    background: var(--bg-hover, #e8e8e8);
}

.method-option.selected,
.method-option input:checked + .method-icon,
.method-option:has(input:checked) {
    background: var(--primary-light, #e3f2fd);
    border-color: var(--primary-color, #1976d2);
}

.method-option input[type="radio"] {
    display: none;
}

.method-icon {
    font-size: 1.5rem;
}

.method-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
}

.method-desc {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.method-config {
    margin-top: 1.5rem;
}

/* Disabled method options (Coming Soon) */
.method-option:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.method-option:has(input:disabled):hover {
    background: var(--bg-secondary, #f8f9fa);
}

.method-badge.coming-soon {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.125rem 0.5rem;
    background: var(--warning-light, #fff3e0);
    color: var(--warning-dark, #e65100);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.source-config {
    margin-top: 1.5rem;
}

.info-box {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--info-light, #e3f2fd);
    border-radius: 8px;
    margin-top: 1rem;
}

.info-box .material-icons {
    color: var(--info-color, #2196f3);
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.info-box-blue {
    background: var(--primary-light, #e3f2fd);
}

.info-box-blue .material-icons {
    color: var(--primary-color, #2196f3);
}

.info-box-gray {
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
}

.info-box-gray .material-icons {
    color: var(--text-muted, #4b5563);
}

/* Skipped step styling */
.step-skipped {
    text-align: center;
}

.step-skipped .step-header {
    margin-bottom: 1rem;
}

.step-skipped .step-header h2 {
    color: var(--text-muted, #4b5563);
}

/* Document Builder sections */
.sections-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-card {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
}

.section-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.section-header input {
    flex: 1;
}

.section-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-body select,
.section-body textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
}

/* Health Tracker fields */
.tracker-fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.field-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.field-row input,
.field-row select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
}

.workflow-builder-placeholder {
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
}

/* Weights list */
.weights-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weight-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
}

.weight-param {
    flex: 1;
    font-weight: 500;
}

.weight-value {
    width: 100px;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   AI-ASSISTED ANALYSIS (Phase 9.5)
   ─────────────────────────────────────────────────────────────────────────── */

.ai-analysis-section {
    background: linear-gradient(135deg, var(--bg-primary, #fff) 0%, #f0f7ff 100%);
    border: 1px solid #b3d4fc;
}

.section-header-with-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.section-header-with-badge h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--primary-color, #1976d2);
}

.section-header-with-badge h3 .material-icons {
    font-size: 1.25rem;
}

.beta-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    background: var(--primary-color, #1976d2);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-description {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.analysis-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analysis-form .form-group {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0;
}

.analysis-form .helper-text {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin-top: 0.25rem;
}

#analyze-resource-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#analyze-resource-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.section-divider span {
    padding: 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Analysis Result */
.analysis-result {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--bg-primary, #fff);
}

.analysis-result.analysis-success {
    border: 1px solid var(--success-color, #4caf50);
}

.analysis-result.analysis-error {
    border: 1px solid var(--error-color, #f44336);
    background: var(--error-light, #ffebee);
}

.result-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
}

.analysis-success .result-header {
    color: var(--success-color, #4caf50);
}

.analysis-error .result-header {
    color: var(--error-color, #f44336);
}

.confidence-badge {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-weight: 600;
}

.confidence-badge.high {
    background: var(--success-light, #e8f5e9);
    color: var(--success-color, #4caf50);
}

.confidence-badge.medium {
    background: var(--warning-light, #fff3e0);
    color: var(--warning-color, #ff9800);
}

.confidence-badge.low {
    background: var(--error-light, #ffebee);
    color: var(--error-color, #f44336);
}

.result-summary {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.result-summary p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.result-section {
    margin-bottom: 1rem;
}

.result-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.detected-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detected-items li {
    padding: 0.625rem 0.875rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    font-size: 0.875rem;
}

.detected-items code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 600;
    color: var(--primary-color, #1976d2);
}

.detected-items .param-type {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-code, #e8e8e8);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Monaco', 'Menlo', monospace;
    color: var(--text-secondary, #666);
}

.detected-items .required-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: var(--error-light, #ffebee);
    color: var(--error-color, #f44336);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.detected-items small {
    color: var(--text-tertiary, #4b5563);
}

.result-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* ───────────────────────────────────────────────────────────────────────────
   TWO-STEP ANALYSIS UI (Phase 9.5)
   ─────────────────────────────────────────────────────────────────────────── */

.analysis-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.analysis-step {
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.analysis-step.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary-color, #1976d2);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.step-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    margin-left: auto;
}

.step-result {
    margin-top: 0.75rem;
    margin-left: 0;
    border-radius: 8px;
}

/* Endpoint display in Step 2 results */
.endpoint-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-code, #f5f5f5);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.endpoint-url {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
    color: var(--primary-color, #1976d2);
    word-break: break-all;
}

.endpoint-method {
    padding: 0.25rem 0.5rem;
    background: var(--success-color, #4caf50);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.example-url {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.example-url code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    word-break: break-all;
}

/* Parameter mapping in Step 2 */
.transform-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    font-style: italic;
}

/* Syntax examples */
.syntax-examples {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-code, #f5f5f5);
    border-radius: 6px;
}

.syntax-examples ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.syntax-examples li {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.syntax-examples em {
    color: var(--text-secondary, #666);
}

.syntax-examples code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.75rem;
    background: var(--bg-primary, #fff);
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
}

/* Query Purpose Section (Step 2) */
.query-purpose-section {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
}

.query-purpose-section label {
    display: block;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.5rem;
}

.query-purpose-section .label-hint {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    margin-top: 0.25rem;
}

.query-purpose-textarea {
    width: 100%;
    min-height: 180px;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--bg-code, #f8f9fa);
    color: var(--text-primary, #1a1a1a);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.query-purpose-textarea:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.query-purpose-textarea::placeholder {
    color: var(--text-tertiary, #4b5563);
}

/* ───────────────────────────────────────────────────────────────────────────
   AUTHENTICATION FIELDS (Phase 9.5)
   ─────────────────────────────────────────────────────────────────────────── */

.auth-security-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--success-light, #e8f5e9);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--success-dark, #2e7d32);
    margin-top: 0.75rem;
}

.auth-security-note .material-icons {
    font-size: 1rem;
    color: var(--success-color, #4caf50);
}

/* Password fields styling */
input[type="password"] {
    font-family: monospace;
    letter-spacing: 1px;
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 5-8: OUTPUT, INTERPRETATION, CLINICAL, EVIDENCE
   ─────────────────────────────────────────────────────────────────────────── */

.additional-outputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.output-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.output-row input,
.output-row select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
}

.thresholds-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.threshold-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.threshold-row input {
    padding: 0.5rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
}

.threshold-label {
    flex: 2;
    min-width: 120px;
}

.threshold-min,
.threshold-max {
    width: 80px;
}

.threshold-color {
    width: 100px;
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 9: TEST & PREVIEW
   ─────────────────────────────────────────────────────────────────────────── */

.test-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .test-section {
        grid-template-columns: 1fr;
    }
}

.test-panel,
.result-panel {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 1.5rem;
}

.test-panel h3,
.result-panel h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.test-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.test-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.test-input-group label {
    font-size: 0.875rem;
    font-weight: 500;
}

.test-input-group input,
.test-input-group select {
    padding: 0.625rem;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 8px;
}

.no-params {
    color: var(--text-secondary, #666);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.test-results {
    min-height: 150px;
}

.empty-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 150px;
    color: var(--text-secondary, #666);
}

.empty-results .material-icons {
    font-size: 2.5rem;
    opacity: 0.5;
}

.test-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.test-loading-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary, #4b5563);
    margin-top: -0.5rem;
}

/* Knowledge Tool Processing Animation */
.test-loading.knowledge-processing {
    align-items: flex-start;
    padding: 1.5rem;
}

.knowledge-processing .processing-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.knowledge-processing .processing-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.processing-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.processing-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    border-left: 3px solid var(--border-color, #e0e0e0);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.processing-step.active {
    opacity: 1;
    border-left-color: var(--primary-color, #4285f4);
    background: var(--primary-light, #e8f0fe);
}

.processing-step.completed {
    opacity: 1;
    border-left-color: var(--success-color, #34a853);
}

.processing-step.completed .step-icon {
    color: var(--success-color, #34a853);
}

.processing-step .step-icon {
    font-size: 1.25rem;
    color: var(--text-muted, #4b5563);
}

.processing-step.active .step-icon {
    color: var(--primary-color, #4285f4);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.processing-step .step-text {
    font-size: 0.875rem;
    color: var(--text-primary, #1a1a1a);
}

/* Audit Trail Styles */
.audit-trail-section {
    width: 100%;
    text-align: left;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary, #e8eaed);
}

.audit-header h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.audit-header h5 .material-icons {
    font-size: 1.25rem;
    color: var(--primary-color, #4285f4);
}

.audit-total-time {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    background: var(--bg-primary, #fff);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.audit-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.audit-summary .summary-item {
    font-size: 0.8125rem;
}

.audit-steps {
    padding: 0.75rem;
}

.audit-step {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}

.audit-step:last-child {
    margin-bottom: 0;
}

.audit-step.step-complete {
    border-color: var(--success-color, #34a853);
}

.audit-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.audit-step.step-complete .audit-step-header {
    background: var(--success-light, #e6f4ea);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary-color, #4285f4);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.audit-step.step-complete .step-number {
    background: var(--success-color, #34a853);
}

.step-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
}

.step-duration {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    background: var(--bg-primary, #fff);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.audit-step-details {
    padding: 0.75rem;
    font-size: 0.8125rem;
}

.audit-detail {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.audit-detail:last-child {
    margin-bottom: 0;
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-simple {
    background: var(--bg-tertiary, #e8eaed);
    color: var(--text-secondary, #666);
}

.badge-comparative {
    background: var(--warning-light, #fef7e0);
    color: var(--warning-dark, #f9a825);
}

.badge-complex {
    background: var(--primary-light, #e8f0fe);
    color: var(--primary-color, #4285f4);
}

.badge-comparison {
    background: var(--info-light, #e8f4fd);
    color: var(--info-color, #1a73e8);
}

.badge-multi-aspect {
    background: #fff3e0;
    color: #ea8600;
}

/* Methodology Banner */
.audit-methodology-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #e8f0fe 0%, #f3e8ff 100%);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-color, #4285f4);
}

.audit-methodology-banner .material-icons {
    font-size: 1rem;
}

.expanded-queries-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.expanded-query {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
}

.expanded-query.more {
    color: var(--text-muted, #4b5563);
    font-style: italic;
    border-style: dashed;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
}

.search-result-item.more {
    justify-content: center;
    align-items: center;
    color: var(--text-muted, #4b5563);
    font-style: italic;
    border-style: dashed;
}

.search-query-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-meta {
    font-size: 0.6875rem;
    color: var(--text-muted, #4b5563);
    margin-top: 0.25rem;
}

.doc-rankings {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.doc-rank-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
}

.doc-rank {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--primary-color, #4285f4);
    min-width: 24px;
}

.doc-rank-item .doc-title {
    flex: 1;
    font-weight: 500;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-rank-item .doc-meta {
    font-size: 0.6875rem;
    color: var(--text-muted, #4b5563);
}

/* Audit Trail Phase Sections */
.audit-phase {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color, #4285f4);
}

.audit-phase.atomization-phase {
    border-left-color: #00897b;
    background: linear-gradient(135deg, #e0f2f1 0%, #fff 100%);
}

.audit-phase.deconstruction-phase {
    border-left-color: #ea8600;
}

.audit-phase.enrichment-phase {
    border-left-color: #9c27b0;
}

.audit-phase.final-queries-phase {
    border-left-color: #4285f4;
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.5rem;
}

.phase-header .material-icons {
    font-size: 1rem;
    color: inherit;
}

.atomization-phase .phase-header {
    color: #00897b;
}

.deconstruction-phase .phase-header {
    color: #ea8600;
}

.enrichment-phase .phase-header {
    color: #9c27b0;
}

.final-queries-phase .phase-header {
    color: var(--primary-color, #4285f4);
}

/* Atomic Queries List */
.atomic-queries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.atomic-query-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #b2dfdb;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.atomic-query-item:hover {
    border-color: #00897b;
    box-shadow: 0 2px 4px rgba(0, 137, 123, 0.1);
}

.atomic-query-item .query-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: #00897b;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.atomic-query-item .query-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.4;
}

/* Methodology Tag (inline) */
.audit-methodology-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #e8f0fe 0%, #f3e8ff 100%);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #5e35b1;
}

.audit-methodology-tag .material-icons {
    font-size: 0.875rem;
}

.aspects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: 0.5rem;
}

.aspect-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #fff3e0;
    color: #ea8600;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.subquery-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.subquery-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.subquery-list li:last-child {
    border-bottom: none;
}

.subquery-list .query-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.subquery-list.deconstructed li {
    color: #ea8600;
}

.subquery-list.enriched li {
    color: #9c27b0;
}

.audit-reasoning,
.audit-methodology {
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted, #666);
}

.query-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.breakdown-item {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

/* Synthesized Response Section */
.synthesized-response-section {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: var(--success-light, #e6f4ea);
    border: 1px solid var(--success-color, #34a853);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.synthesized-response-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--success-dark, #1e7e34);
}

.synthesized-response-section h5 .material-icons {
    font-size: 1.25rem;
}

.synthesis-summary {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary, #1a1a1a);
    white-space: pre-wrap;
}

.synthesis-confidence {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--success-color, #34a853);
    color: #fff;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Knowledge Results Specific */
.test-success.knowledge-results {
    text-align: left;
    align-items: flex-start;
}

.test-success.knowledge-results > .material-icons {
    align-self: center;
}

.test-success.knowledge-results > h4 {
    align-self: center;
    margin-bottom: 1rem;
}

.test-success,
.test-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.test-success .material-icons {
    font-size: 3rem;
    color: var(--success-color, #4caf50);
}

.test-error .material-icons {
    font-size: 3rem;
    color: var(--error-color, #f44336);
}

.result-value {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.result-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.result-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.result-label-row h5 {
    margin: 0 !important;
}

.btn-copy-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-copy-result:hover {
    background: var(--bg-tertiary, #e8e8e8);
    color: var(--text-primary, #333);
    border-color: var(--text-tertiary, #4b5563);
}

.btn-copy-result.copied {
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
    border-color: var(--success-color, #2e7d32);
}

.btn-copy-result .material-icons {
    font-size: 14px;
}

.result-number {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: monospace;
}

.result-interpretation {
    margin-top: 0.5rem;
}

.interp-label {
    padding: 0.25rem 0.75rem;
    background: var(--success-light, #e8f5e9);
    color: var(--success-color, #4caf50);
    border-radius: 16px;
    font-weight: 500;
}

/* Constructed Query Display (Test Results) */
.test-query-section {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.test-query-section h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.query-display {
    padding: 0.75rem;
    background: var(--bg-code, #f5f5f5);
    border-radius: 6px;
    overflow-x: auto;
}

.query-url {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    color: var(--primary-color, #1976d2);
    word-break: break-all;
    white-space: pre-wrap;
}

.query-explanation {
    margin: 0.75rem 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.query-confidence {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--success-light, #e8f5e9);
    color: var(--success-color, #4caf50);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.result-json {
    text-align: left;
    background: var(--bg-code, #f5f5f5);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    max-height: 300px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Source Attribution Section (Test Results) */
.test-attribution-section {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: var(--info-light, #e3f2fd);
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 3px solid var(--info-color, #2196f3);
}

.test-attribution-section h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.attribution-details p {
    margin: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.attribution-disclaimer {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    font-size: 0.75rem !important;
    color: var(--text-tertiary, #4b5563) !important;
}

/* Full Response Toggle (Test Results) */
.full-response-section {
    width: 100%;
    text-align: left;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.toggle-full-response {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.toggle-full-response .material-icons {
    font-size: 1rem;
}

.full-response-content {
    margin-top: 1rem;
}

.full-response-content h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
}

.full-response-json {
    max-height: 400px;
    background: var(--bg-dark, #263238) !important;
    color: var(--text-light, #eceff1) !important;
}

/* Preview */
.preview-section {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 1.5rem;
}

.preview-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.tool-preview-card {
    padding: 1.5rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
}

.preview-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.preview-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-color, #1976d2);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-title h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.preview-type {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.preview-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary, #666);
}

.preview-meta {
    display: flex;
    gap: 1rem;
}

.preview-category {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-primary, #fff);
    border-radius: 16px;
}

.preview-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.preview-status.status-draft {
    background: var(--warning-light, #fff3e0);
    color: var(--warning-color, #ff9800);
}

.preview-status.status-published {
    background: var(--success-light, #e8f5e9);
    color: var(--success-color, #4caf50);
}

/* ───────────────────────────────────────────────────────────────────────────
   STEP 10: PUBLISH
   ─────────────────────────────────────────────────────────────────────────── */

.publish-ready,
.publish-errors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    border-radius: 12px;
}

.publish-ready {
    background: var(--success-light, #e8f5e9);
}

.publish-errors {
    background: var(--error-light, #ffebee);
}

.success-icon {
    font-size: 4rem;
    color: var(--success-color, #4caf50);
}

.error-icon {
    font-size: 4rem;
    color: var(--error-color, #f44336);
}

.publish-ready h3,
.publish-errors h3 {
    margin: 0;
}

.error-list {
    text-align: left;
    width: 100%;
    max-width: 500px;
}

.error-step {
    margin-bottom: 1rem;
}

.error-step h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--error-color, #f44336);
}

.error-step ul {
    margin: 0;
    padding-left: 1.25rem;
}

.error-step li {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin-bottom: 0.25rem;
}

.publish-summary {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.publish-summary h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.publish-options {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 1.5rem;
}

.publish-options h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   LOADING STATE
   ─────────────────────────────────────────────────────────────────────────── */

.tool-builder-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 50vh;
}

/* ───────────────────────────────────────────────────────────────────────────
   BUTTONS
   ─────────────────────────────────────────────────────────────────────────── */

.btn-success {
    background: var(--success-color, #4caf50);
    color: white;
    border: none;
}

.btn-success:hover {
    background: var(--success-dark, #388e3c);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: background 0.2s, color 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover, #e8e8e8);
    color: var(--text-primary, #1a1a1a);
}

.btn-icon.param-delete:hover,
.btn-icon.section-delete:hover,
.btn-icon.field-delete:hover,
.btn-icon.enum-delete:hover,
.btn-icon.output-delete:hover,
.btn-icon.threshold-delete:hover {
    background: var(--error-light, #ffebee);
    color: var(--error-color, #f44336);
}

/* ───────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .tool-builder-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .tool-builder-header .header-left,
    .tool-builder-header .header-right {
        justify-content: center;
    }

    .tool-builder-stepper {
        padding: 0.75rem;
    }

    .stepper-step {
        min-width: 60px;
        padding: 0.25rem;
    }

    .step-label {
        display: none;
    }

    .tool-builder-content {
        padding: 1rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .param-row {
        flex-direction: column;
    }

    .method-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .tool-builder-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .tool-builder-footer .footer-left,
    .tool-builder-footer .footer-right {
        width: 100%;
        justify-content: center;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   VALIDATION ERRORS MODAL
   ─────────────────────────────────────────────────────────────────────────── */

.validation-errors-modal {
    padding: 1rem 0;
}

.validation-errors-modal p {
    margin: 0 0 1rem 0;
}

.validation-errors-modal ul {
    margin: 0;
    padding-left: 1.25rem;
}

.validation-errors-modal li {
    margin-bottom: 0.5rem;
    color: var(--error-color, #f44336);
}

/* ───────────────────────────────────────────────────────────────────────────
   SPINNER (if not defined elsewhere)
   ─────────────────────────────────────────────────────────────────────────── */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color, #e0e0e0);
    border-top-color: var(--primary-color, #1976d2);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   DRAFT MANAGER
   ─────────────────────────────────────────────────────────────────────────── */

.draft-manager {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.draft-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
}

.draft-manager-header .header-left h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: var(--text-primary, #1a1a1a);
}

.draft-manager-header .header-left .text-muted {
    margin: 0;
    color: var(--text-secondary, #666);
}

.draft-manager-body h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: var(--text-primary, #1a1a1a);
}

.drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.draft-card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.draft-card:hover {
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.draft-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
}

.draft-content {
    flex: 1;
    min-width: 0;
}

.draft-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.draft-type {
    font-weight: 500;
    color: var(--primary-color, #1976d2);
}

.draft-divider {
    color: var(--text-muted, #4b5563);
}

.draft-date {
    color: var(--text-muted, #4b5563);
}

.draft-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.draft-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.draft-edit-btn,
.draft-delete-btn {
    white-space: nowrap;
}

.draft-manager-loading,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary, #666);
}

.empty-state p {
    margin: 0.5rem 0;
}

.empty-state .text-muted {
    color: var(--text-muted, #4b5563);
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .drafts-grid {
        grid-template-columns: 1fr;
    }

    .draft-card {
        flex-direction: column;
    }

    .draft-actions {
        flex-direction: row;
    }

    .draft-manager-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY TOOLS SECTION (Phase 9.6)
   Displays user's published and draft tools with management actions
   ═══════════════════════════════════════════════════════════════════════════ */

.my-tools-manager {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Tools Sections */
.tools-section {
    margin-bottom: 2.5rem;
}

.tools-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: var(--text-primary, #1a1a1a);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.tools-section h2 .material-icons {
    font-size: 1.5rem;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

/* Tool Card */
.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.tool-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Published tool card - green accent */
.tool-card-published {
    border-color: var(--success-color, #4caf50);
    border-left-width: 4px;
}

.tool-card-published:hover {
    border-color: var(--success-color, #4caf50);
}

/* Draft tool card - amber accent */
.tool-card-draft {
    border-color: var(--warning-color, #ff9800);
    border-left-width: 4px;
}

.tool-card-draft:hover {
    border-color: var(--warning-color, #ff9800);
}

/* Card Header */
.tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.5rem;
}

.tool-card-header .tool-icon {
    font-size: 2rem;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-published {
    background: var(--success-light, #e8f5e9);
    color: var(--success-color, #4caf50);
}

.status-draft {
    background: var(--warning-light, #fff3e0);
    color: var(--warning-dark, #e65100);
}

/* Card Content */
.tool-card-content {
    flex: 1;
    padding: 0.5rem 1.25rem 1rem;
}

.tool-card-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.tool-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.tool-divider {
    color: var(--text-muted, #4b5563);
}

.tool-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-stats {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.tool-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tool-stats .material-icons {
    font-size: 1rem;
    color: var(--text-muted, #4b5563);
}

/* Card Actions */
.tool-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f8f9fa);
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.tool-card-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.tool-card-actions .btn-ghost {
    flex: 0;
    padding: 0.5rem;
    color: var(--danger-color, #dc3545);
}

.tool-card-actions .btn-ghost:hover {
    background: var(--danger-light, #ffebee);
}

.tool-card-actions .btn-warning {
    background: var(--warning-color, #ff9800);
    color: white;
    border-color: var(--warning-color, #ff9800);
}

.tool-card-actions .btn-warning:hover {
    background: var(--warning-dark, #e65100);
    border-color: var(--warning-dark, #e65100);
}

/* Empty state for sections */
.empty-state-small {
    padding: 2rem;
    text-align: center;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    border: 1px dashed var(--border-color, #e0e0e0);
}

.empty-state-small .text-muted {
    margin: 0;
    color: var(--text-muted, #4b5563);
    font-size: 0.875rem;
}

/* Small spinner for buttons */
.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card-actions {
        flex-wrap: wrap;
    }

    .tool-card-actions .btn {
        flex: 1 1 45%;
    }

    .tool-card-actions .btn-ghost {
        flex: 0 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUERY SYNTAX SECTION (Phase 9.6)
   Agent guidance for constructing API queries
   ═══════════════════════════════════════════════════════════════════════════ */

.query-syntax-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.query-syntax-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color, #1976d2);
}

.query-syntax-section h3 .material-icons {
    font-size: 1.25rem;
}

.query-syntax-section .section-description {
    margin: 0.5rem 0 1.25rem 0;
    color: var(--text-secondary, #666);
    font-size: 0.875rem;
}

.query-syntax-details {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.query-syntax-details.hidden {
    display: none;
}

.query-syntax-rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.query-syntax-rules .form-group {
    margin-bottom: 0;
}

.query-syntax-rules input {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label span {
    font-weight: 500;
}

.label-hint {
    font-weight: 400;
    color: var(--text-muted, #4b5563);
    font-size: 0.8125rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .query-syntax-rules {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .query-syntax-rules {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   RESULT VALIDATION SECTION (Phase 9.5)
   ─────────────────────────────────────────────────────────────────────────── */

.result-validation-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px dashed var(--border-color, #e0e0e0);
}

.result-validation-section .section-header-with-badge h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color, #2196F3);
}

.optional-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary, #f5f5f5);
    color: var(--text-muted, #4b5563);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Toggle switch for enabling validation */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--border-color, #ccc);
    border-radius: 26px;
    transition: background-color 0.3s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color, #2196F3);
}

.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(22px);
}

.toggle-label {
    font-weight: 500;
    color: var(--text-primary, #333);
}

/* Validation config section */
.validation-config {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    transition: opacity 0.3s ease;
}

.validation-config.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.validation-config .form-group {
    margin-bottom: 1rem;
}

.validation-config .form-group:last-child {
    margin-bottom: 0;
}

.validation-config select,
.validation-config textarea {
    width: 100%;
}

.validation-config textarea {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Reset button */
.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.btn-small .material-icons {
    font-size: 1rem;
    margin-right: 0.25rem;
}

/* Validation preview/info box */
.validation-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--info-bg, #e3f2fd);
    border: 1px solid var(--info-border, #90caf9);
    border-radius: 8px;
}

.validation-preview .preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--info-text, #1565c0);
    margin-bottom: 0.75rem;
}

.validation-preview .preview-header .material-icons {
    font-size: 1.25rem;
}

.validation-flow {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary, #555);
    font-size: 0.875rem;
    line-height: 1.8;
}

.validation-flow li {
    margin-bottom: 0.25rem;
}

.validation-flow li:last-child {
    margin-bottom: 0;
}

/* Result validation metadata in test results */
.validation-metadata {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary, #f8f9fa);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color, #2196F3);
}

.validation-metadata h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.relevance-score {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
}

.relevance-score.high {
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
}

.relevance-score.medium {
    background: var(--warning-bg, #fff8e1);
    color: var(--warning-color, #f57c00);
}

.relevance-score.low {
    background: var(--error-bg, #ffebee);
    color: var(--error-color, #c62828);
}

.validation-issues {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--warning-bg, #fff8e1);
    border-radius: 6px;
}

.validation-issues h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--warning-color, #f57c00);
}

.validation-issues ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #555);
}

.validation-warning {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--warning-bg, #fff8e1);
    border: 1px solid var(--warning-border, #ffcc02);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--warning-color, #f57c00);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.refinement-info {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--info-bg, #e3f2fd);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.refinement-info h5 {
    margin: 0 0 0.5rem 0;
    color: var(--info-text, #1565c0);
}

.refinement-info code {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-primary, #fff);
    border-radius: 4px;
    font-size: 0.75rem;
    word-break: break-all;
}

/* ───────────────────────────────────────────────────────────────────────────
   RESPONSE EXTRACTION SECTION (Phase 9.5)
   ─────────────────────────────────────────────────────────────────────────── */

.response-extraction-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed var(--border-color, #e0e0e0);
}

.response-extraction-section .section-header-with-badge h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success-color, #2e7d32);
}

.recommended-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info callout box */
.info-callout {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--info-bg, #e3f2fd);
    border: 1px solid var(--info-border, #90caf9);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-callout .material-icons {
    color: var(--info-text, #1565c0);
    flex-shrink: 0;
}

.info-callout div {
    font-size: 0.875rem;
    color: var(--text-secondary, #555);
}

.info-callout strong {
    color: var(--text-primary, #333);
}

.info-callout code {
    background: rgba(255, 255, 255, 0.5);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* Extraction config section */
.extraction-config {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    transition: opacity 0.3s ease;
}

.extraction-config.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Extraction preview (before/after) */
.extraction-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
}

.extraction-preview .preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 1rem;
}

.before-after {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.before-after .before,
.before-after .after {
    flex: 1;
    padding: 0.75rem;
    border-radius: 6px;
}

.before-after .before {
    background: var(--error-bg, #ffebee);
    border: 1px solid var(--error-border, #ffcdd2);
}

.before-after .after {
    background: var(--success-bg, #e8f5e9);
    border: 1px solid var(--success-border, #c8e6c9);
}

.before-after h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.before-after .before h5 {
    color: var(--error-color, #c62828);
}

.before-after .after h5 {
    color: var(--success-color, #2e7d32);
}

.before-after code {
    display: block;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--text-secondary, #555);
    word-break: break-all;
    overflow-x: auto;
}

.before-after p {
    margin: 0.5rem 0 0 0;
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

.before-after .arrow {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-muted, #4b5563);
    flex-shrink: 0;
}

/* Test UI: System input styling */
.test-input-group.system-input {
    background: var(--info-bg, #e3f2fd);
    border: 1px solid var(--info-border, #90caf9);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.test-input-group.system-input label {
    color: var(--info-text, #1565c0);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    background: var(--info-border, #90caf9);
    color: var(--info-text, #1565c0);
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: auto;
}

.test-input-group.system-input textarea {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--info-border, #90caf9);
}

.test-input-group.system-input .helper-text {
    color: var(--info-text, #1565c0);
    opacity: 0.8;
}

/* Input divider */
.input-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem;
}

.input-divider::before,
.input-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}

.input-divider span {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Extracted response display in test results */
.extracted-response {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--success-bg, #e8f5e9);
    border: 1px solid var(--success-border, #c8e6c9);
    border-radius: 8px;
}

.extracted-response h4 {
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success-color, #2e7d32);
}

.extracted-response .summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary, #333);
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
}

.extracted-data {
    margin-top: 0.75rem;
}

.extracted-data h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #555);
}

.extracted-data pre {
    margin: 0;
    padding: 0.75rem;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    font-size: 0.75rem;
    overflow-x: auto;
}

.extraction-confidence {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.extraction-confidence.high {
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
}

.extraction-confidence.medium {
    background: var(--warning-bg, #fff8e1);
    color: var(--warning-color, #f57c00);
}

.extraction-confidence.low {
    background: var(--error-bg, #ffebee);
    color: var(--error-color, #c62828);
}

.partial-fulfillment {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--warning-bg, #fff8e1);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.partial-fulfillment h5 {
    margin: 0 0 0.5rem 0;
    color: var(--warning-color, #f57c00);
}

.partial-fulfillment ul {
    margin: 0;
    padding-left: 1.25rem;
}

@media (max-width: 768px) {
    .before-after {
        flex-direction: column;
    }

    .before-after .arrow {
        transform: rotate(90deg);
        justify-content: center;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   SYSTEM INPUTS SECTION (Input Parameters Step)
   ─────────────────────────────────────────────────────────────────────────── */

.system-inputs-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--info-bg, #e3f2fd) 0%, rgba(227, 242, 253, 0.5) 100%);
    border: 1px solid var(--info-border, #90caf9);
    border-radius: 12px;
}

.system-inputs-section .section-header-with-badge {
    margin-bottom: 0.75rem;
}

.system-inputs-section .section-header-with-badge h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--info-text, #1565c0);
    font-size: 1rem;
    margin: 0;
}

.system-inputs-section .section-description {
    font-size: 0.875rem;
    color: var(--text-secondary, #555);
    margin-bottom: 1rem;
}

.system-inputs-section .section-description code {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--info-text, #1565c0);
}

/* Input preview card */
.system-input-preview {
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--info-border, #90caf9);
}

.input-preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-preview-card .preview-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.input-preview-card .preview-label .material-icons {
    font-size: 1.125rem;
    color: var(--info-text, #1565c0);
}

.input-preview-card .required-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    background: var(--error-bg, #ffebee);
    color: var(--error-color, #c62828);
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: auto;
}

.input-preview-card .preview-type {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.input-preview-card .preview-desc {
    font-size: 0.875rem;
    color: var(--text-secondary, #555);
    font-style: italic;
}

.input-preview-card .preview-example {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #555);
}

.input-preview-card .preview-example strong {
    color: var(--text-primary, #333);
}

/* Section divider (reusable) */
.section-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0 1rem 0;
    gap: 1rem;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}

.section-divider span {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* ───────────────────────────────────────────────────────────────────────────
   KNOWLEDGE TOOL STYLES
   ─────────────────────────────────────────────────────────────────────────── */

.knowledge-upload-section {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.knowledge-doc-list {
    margin-top: 1.5rem;
}

.knowledge-doc-list h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
}

.doc-list-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.knowledge-doc-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.knowledge-doc-item:hover {
    border-color: var(--primary-color, #4285f4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.knowledge-doc-item .doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    flex-shrink: 0;
}

.knowledge-doc-item .doc-icon .material-icons {
    font-size: 1.25rem;
    color: var(--primary-color, #4285f4);
}

.knowledge-doc-item .doc-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.knowledge-doc-item .doc-title {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledge-doc-item .doc-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.namespace-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--primary-light, #e8f0fe);
    color: var(--primary-color, #4285f4);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-right: 0.25rem;
}

.doc-list-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    margin: 0 0 0.75rem 0;
}

.knowledge-doc-item .doc-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.knowledge-doc-item .btn-icon {
    padding: 0.375rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted, #4b5563);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.knowledge-doc-item .doc-download:hover {
    background: var(--primary-light, #e8f0fe);
    color: var(--primary-color, #4285f4);
}

.knowledge-doc-item .doc-delete:hover {
    background: var(--error-light, #fce8e6);
    color: var(--error-color, #ea4335);
}

/* Document Selection Checkbox */
.knowledge-doc-item .doc-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.knowledge-doc-item .doc-select-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color, #4285f4);
}

.knowledge-doc-item.selected {
    border-color: var(--primary-color, #4285f4);
    background: var(--primary-light, #e8f0fe);
}

/* Document Selection Section */
.document-selection-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.document-selection-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.document-selection-section h4 .material-icons {
    font-size: 1.25rem;
    color: var(--primary-color, #4285f4);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    accent-color: var(--primary-color, #4285f4);
}

.selected-docs-container {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
}

.selected-docs-list .no-selection {
    color: var(--text-muted, #4b5563);
    font-style: italic;
    margin: 0;
}

.selected-docs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--primary-light, #e8f0fe);
    color: var(--primary-color, #4285f4);
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.doc-chip .material-icons {
    font-size: 1rem;
}

.doc-chip .chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--primary-color, #4285f4);
    transition: background 0.2s, color 0.2s;
}

.doc-chip .chip-remove:hover {
    background: var(--primary-color, #4285f4);
    color: #fff;
}

.doc-chip .chip-remove .material-icons {
    font-size: 14px;
}

.selection-count {
    margin: 0.75rem 0 0 0;
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

.knowledge-synthesis-config {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
}

.empty-state,
.error-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #4b5563);
}

.empty-state .material-icons,
.error-state .material-icons {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.error-state {
    color: var(--error-color, #ea4335);
}

.empty-state .hint {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted, #4b5563);
    padding: 1rem;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Upload Method Tabs */
.upload-method-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.upload-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: all 0.2s;
}

.upload-tab:hover {
    border-color: var(--primary-color, #4285f4);
    color: var(--primary-color, #4285f4);
}

.upload-tab.active {
    background: var(--primary-color, #4285f4);
    border-color: var(--primary-color, #4285f4);
    color: white;
}

.upload-tab .material-icons {
    font-size: 1.125rem;
}

.upload-method-content {
    display: block;
}

.upload-method-content.hidden {
    display: none;
}

/* File Upload Drop Zone */
.file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-primary, #fff);
    border: 2px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
}

.file-upload-area:hover {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.02);
}

.file-upload-area.drag-over {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.08);
    border-style: solid;
}

.file-upload-area .material-icons {
    font-size: 2.5rem;
    color: var(--text-muted, #4b5563);
    margin-bottom: 0.5rem;
}

.file-upload-area p {
    margin: 0.25rem 0;
    color: var(--text-secondary, #666);
}

.file-upload-area a {
    color: var(--primary-color, #4285f4);
    text-decoration: none;
    font-weight: 500;
}

.file-upload-area a:hover {
    text-decoration: underline;
}

.file-upload-area .file-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

.file-upload-area .selected-file-name {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    word-break: break-all;
    max-width: 100%;
}

.file-upload-area .change-file-link {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* PDF Upload Form Fields */
.pdf-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.pdf-form-fields .form-group {
    margin: 0;
}

.pdf-form-fields .form-group:first-child {
    grid-column: 1 / -1;
}

/* Upload Progress */
.upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.upload-progress .progress-status {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    margin: 0;
}

.upload-progress .progress-percent {
    font-size: 0.875rem;
    color: var(--text-muted, #4b5563);
    margin: 0;
}

.progress-bar-container {
    width: 100%;
    max-width: 300px;
    height: 8px;
    background: var(--bg-secondary, #e9ecef);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color, #4285f4), var(--primary-dark, #1a73e8));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 9 - DOCUMENT UPLOAD FOR EXTRACTOR TOOLS
   ═══════════════════════════════════════════════════════════════════════════ */

.document-upload-group {
    margin-bottom: 1.5rem;
}

.document-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-primary, #fff);
    border: 2px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 140px;
}

.document-upload-area:hover {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.02);
}

.document-upload-area.drag-over {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.08);
    border-style: solid;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-placeholder .material-icons {
    font-size: 2.5rem;
    color: var(--text-muted, #4b5563);
}

.upload-placeholder p {
    margin: 0;
    color: var(--text-secondary, #666);
}

.upload-placeholder a {
    color: var(--primary-color, #4285f4);
    text-decoration: none;
    font-weight: 500;
}

.upload-placeholder a:hover {
    text-decoration: underline;
}

.upload-placeholder .helper-text {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

.upload-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    width: 100%;
}

.upload-preview .file-icon {
    font-size: 2rem;
    color: var(--primary-color, #4285f4);
}

.upload-preview .file-details {
    flex: 1;
    text-align: left;
}

.upload-preview .file-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    word-break: break-all;
}

.upload-preview .file-size {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    margin-top: 0.25rem;
}

.upload-preview .btn-icon {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted, #4b5563);
    border-radius: 50%;
    transition: all 0.2s;
}

.upload-preview .btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--error-color, #d32f2f);
}

.input-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted, #4b5563);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-divider::before,
.input-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}

.input-divider span {
    padding: 0 1rem;
}

/* =================================================================
   VISUALIZATION TOOL BUILDER
   ================================================================= */

/* Visualization Type Selector (Chart/Table/Timeline) */
.viz-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.viz-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.viz-type-card:hover {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.03);
}

.viz-type-card.selected {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.08);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.viz-type-card .viz-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.viz-type-card .viz-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.25rem;
}

.viz-type-card .viz-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

.viz-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Chart Type Selector (Line/Bar/Pie/Area/Bubble/Radar/Polar/etc) */
.chart-type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.chart-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.chart-type-option:hover {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.03);
}

.chart-type-option.selected {
    border-color: var(--primary-color, #4285f4);
    background: rgba(66, 133, 244, 0.08);
}

.chart-type-option .chart-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.chart-type-option .chart-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.chart-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Visualization Config Sections */
.viz-config-section {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.viz-config-section h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viz-config-section h5 .material-icons {
    font-size: 1.1rem;
    color: var(--text-muted, #4b5563);
}

/* Data Mapping Fields */
.data-mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.data-mapping-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.data-mapping-field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.data-mapping-field input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--bg-primary, #fff);
    transition: border-color 0.2s;
}

.data-mapping-field input:focus {
    outline: none;
    border-color: var(--primary-color, #4285f4);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.data-mapping-field .field-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
}

/* Styling Options */
.styling-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-input-wrapper label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

.color-input-wrapper input[type="color"] {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-primary, #fff);
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
    border-radius: 3px;
    border: none;
}

.color-input-wrapper input[type="text"] {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: monospace;
}

/* Checkbox Options */
.checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color, #4285f4);
}

.checkbox-option span {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* Visualization Preview */
.viz-preview-container {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1rem;
    min-height: 280px;
    margin-top: 1rem;
}

.viz-preview-container .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
}

.viz-preview-container .preview-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #4b5563);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viz-preview-container .preview-label .material-icons {
    font-size: 1rem;
}

.viz-preview-container .preview-content {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viz-preview-container .preview-placeholder {
    color: var(--text-muted, #4b5563);
    text-align: center;
    font-size: 0.85rem;
}

.viz-preview-container .preview-placeholder .material-icons {
    font-size: 3rem;
    opacity: 0.7;
    display: block;
    margin-bottom: 0.5rem;
}

/* Table Configuration */
.table-config-section {
    margin-top: 1rem;
}

.table-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Timeline Configuration */
.timeline-config-section {
    margin-top: 1rem;
}

.category-colors-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.category-color-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
}

.category-color-item input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    cursor: pointer;
}

.category-color-item span {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    text-transform: capitalize;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .viz-type-selector {
        grid-template-columns: 1fr;
    }

    .chart-type-selector {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .data-mapping-grid {
        grid-template-columns: 1fr;
    }

    .styling-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .category-colors-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .chart-type-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkbox-options {
        flex-direction: column;
    }
}

/* =================================================================
   VISUALIZATION TEST UI
   ================================================================= */

.viz-test-step .step-header {
    margin-bottom: 1.5rem;
}

.viz-test-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.viz-test-input-panel,
.viz-test-output-panel {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.viz-test-input-panel .panel-header,
.viz-test-output-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.viz-test-input-panel .panel-header h3,
.viz-test-output-panel .panel-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viz-test-input-panel .panel-header h3 .material-icons,
.viz-test-output-panel .panel-header h3 .material-icons {
    font-size: 1.1rem;
    color: var(--text-muted, #4b5563);
}

.mock-data-editor {
    padding: 0;
}

.mock-data-editor textarea {
    width: 100%;
    border: none;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: none;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1a1a1a);
}

.mock-data-editor textarea:focus {
    outline: none;
}

.viz-test-input-panel .panel-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
}

.viz-render-container {
    min-height: 350px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-viz-placeholder {
    text-align: center;
    color: var(--text-muted, #4b5563);
}

.empty-viz-placeholder .material-icons {
    font-size: 3rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.empty-viz-placeholder p {
    margin: 0;
    font-size: 0.85rem;
}

.viz-type-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-color, #2196f3);
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Config Summary */
.viz-config-summary {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    padding: 1.25rem;
}

.viz-config-summary h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary, #1a1a1a);
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.config-label {
    font-size: 0.75rem;
    color: var(--text-muted, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.config-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Small button variant */
.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-sm .material-icons {
    font-size: 1rem;
}

/* AI Fill controls container */
.ai-fill-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Series mode selector for line charts */
.series-mode-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    background: white;
    color: var(--text-primary, #333);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.series-mode-select:hover {
    border-color: var(--primary-color, #2563eb);
}

.series-mode-select:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* AI Fill button styling */
#viz-ai-fill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#viz-ai-fill-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

#viz-ai-fill-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

#viz-ai-fill-btn .material-icons {
    font-size: 1rem;
}

#viz-ai-fill-btn .material-icons.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error message in render container */
.viz-render-container .error-message {
    text-align: center;
    color: var(--error-color, #d32f2f);
    padding: 2rem;
}

.viz-render-container .error-message .material-icons {
    font-size: 2.5rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.viz-render-container .error-message p {
    margin: 0;
    font-size: 0.85rem;
}

/* Output Schema Section */
.viz-output-schema-section {
    margin-top: 1.5rem;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.viz-output-schema-section .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.viz-output-schema-section .panel-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viz-output-schema-section .panel-header h3 .material-icons {
    font-size: 1.1rem;
    color: var(--primary-color, #1976d2);
}

.viz-output-schema-section .helper-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.output-schema-container {
    padding: 1rem;
    background: #1e1e1e;
    max-height: 300px;
    overflow: auto;
}

.output-schema-code {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #9cdcfe;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Input Object Section */
.viz-input-object-section {
    margin-top: 1.5rem;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.viz-input-object-section .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.viz-input-object-section .panel-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viz-input-object-section .panel-header h3 .material-icons {
    font-size: 1.1rem;
    color: var(--secondary-color, #7c3aed);
}

.viz-input-object-section .helper-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.input-object-container {
    padding: 1rem;
    background: #252526;
    max-height: 200px;
    overflow: auto;
}

.input-object-code {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #ce9178;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Visualization Input Fields */
.viz-input-fields {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.viz-input-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.viz-input-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #333);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.viz-input-field .required-indicator {
    color: var(--error-color, #d32f2f);
    font-weight: 600;
}

.viz-input-field .type-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    font-weight: 400;
}

.viz-param-input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--surface-color, #fff);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.viz-param-input:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.viz-param-input.json-input {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: vertical;
}

.viz-param-input.csv-input {
    resize: vertical;
}

textarea.viz-param-input {
    min-height: 60px;
}

/* Responsive */
@media (max-width: 900px) {
    .viz-test-layout {
        grid-template-columns: 1fr;
    }

    .viz-render-container {
        min-height: 280px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 10: CAPABILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.capabilities-step {
    max-width: 800px;
    margin: 0 auto;
}

.ai-suggest-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-light, #e3f2fd) 0%, #f3e5f5 100%);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(25, 118, 210, 0.2);
}

.ai-suggest-banner .banner-icon {
    font-size: 2rem;
}

.ai-suggest-banner .banner-content {
    flex: 1;
}

.ai-suggest-banner .banner-title {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.25rem;
}

.ai-suggest-banner .banner-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.ai-suggest-banner .btn-ai-suggest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ai-suggest-banner .btn-ai-suggest:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.ai-suggest-banner .btn-ai-suggest:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-suggest-banner .btn-ai-suggest .material-icons {
    font-size: 1.1rem;
}

.ai-suggest-banner .btn-ai-suggest.loading .material-icons {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.capabilities-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cap-field-group {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 1.25rem;
}

.cap-field-group.has-error {
    border-color: var(--error-color, #d32f2f);
}

.cap-field-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.5rem;
}

.cap-field-label .required {
    color: var(--error-color, #d32f2f);
}

.cap-field-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary, #4b5563);
    margin-bottom: 0.75rem;
}

.cap-description-input {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cap-description-input:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin-top: 0.25rem;
}

.char-count.warning {
    color: var(--warning-color, #f57c00);
}

/* Chip Input */
.chip-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    min-height: 44px;
    align-items: center;
    background: var(--surface-color, #fff);
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chip-input-container:focus-within {
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.cap-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-color, #1976d2);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.cap-chip .chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(25, 118, 210, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cap-chip .chip-remove:hover {
    background: rgba(25, 118, 210, 0.3);
}

.cap-chip .chip-remove .material-icons {
    font-size: 14px;
}

.chip-text-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 0.25rem;
    background: transparent;
}

.chip-text-input::placeholder {
    color: var(--text-tertiary, #4b5563);
}

.chip-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin-top: 0.25rem;
}

.chip-count.error {
    color: var(--error-color, #d32f2f);
}

.chip-count.success {
    color: var(--success-color, #2e7d32);
}

/* Checkbox Grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-item:hover {
    background: var(--bg-secondary, #f8f9fa);
}

.checkbox-item.selected {
    background: var(--primary-light, #e3f2fd);
    border-color: var(--primary-color, #1976d2);
}

.checkbox-item input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--primary-color, #1976d2);
}

.checkbox-item .checkbox-label {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    font-size: 0.85rem;
}

.checkbox-item .checkbox-desc {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    margin-top: 0.15rem;
}

.selection-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin-top: 0.25rem;
}

.selection-count.error {
    color: var(--error-color, #d32f2f);
}

.selection-count.success {
    color: var(--success-color, #2e7d32);
}

/* Label with Action Button */
.label-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.label-with-action label {
    margin-bottom: 0;
}

/* Per-field AI Generate Button */
.btn-ai-generate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.btn-ai-generate:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.btn-ai-generate:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-ai-generate .material-icons {
    font-size: 1rem;
}

.btn-ai-generate .material-icons.spinning {
    animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
    .ai-suggest-banner {
        flex-direction: column;
        text-align: center;
    }

    .checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }

    .label-with-action {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT BUILDER STYLES (Phase 9.6.1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Template Editor Container */
.template-editor-container {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.template-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.template-toolbar-spacer {
    flex: 1;
}

.template-editor {
    min-height: 300px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem;
    border: none;
    background: var(--bg-primary, #fff);
    resize: vertical;
}

.template-hints {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary, #f1f3f4);
    border-top: 1px solid var(--border-color, #e0e0e0);
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    flex-wrap: wrap;
}

.template-hints .hint-label {
    font-weight: 600;
    color: var(--text-primary, #333);
}

.template-hints code {
    background: var(--bg-primary, #fff);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid var(--border-light, #ddd);
}

/* Placeholder Configuration List */
.placeholder-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.placeholder-empty-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
    color: var(--text-secondary, #666);
}

.placeholder-empty-state .material-icons {
    font-size: 1.5rem;
    color: var(--text-tertiary, #4b5563);
}

.placeholder-empty-state code {
    background: var(--bg-primary, #fff);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Individual Placeholder Config Item */
.placeholder-config-item {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.placeholder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-light, #eee);
}

.placeholder-name {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-dark, #1565c0);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.placeholder-source {
    min-width: 140px;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    font-size: 0.85rem;
}

.placeholder-config-details {
    padding: 0.75rem 1rem;
}

.config-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.config-row:last-child {
    margin-bottom: 0;
}

.config-row label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.config-row input,
.config-row select,
.config-row textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-primary, #fff);
}

.config-row textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* Preview Container */
.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.preview-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary, #4b5563);
    font-style: italic;
}

.doc-preview-container {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    min-height: 200px;
    overflow: hidden;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-tertiary, #4b5563);
    gap: 0.5rem;
}

.preview-placeholder .material-icons {
    font-size: 3rem;
    opacity: 0.5;
}

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 1rem;
    color: var(--text-secondary, #666);
}

.preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 0.75rem;
    color: var(--danger-color, #d32f2f);
    text-align: center;
    padding: 1rem;
}

.preview-error .material-icons {
    font-size: 2.5rem;
}

.doc-preview {
    display: flex;
    flex-direction: column;
}

.doc-preview .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-light, #eee);
}

.doc-preview .format-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-color, #1976d2);
    border-radius: 4px;
    text-transform: uppercase;
}

.doc-preview .sample-data-note {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    font-style: italic;
}

.doc-preview .preview-content {
    padding: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-primary, #fff);
}

.doc-preview .preview-content pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
}

.doc-preview.html-preview .preview-content {
    font-size: 0.9rem;
    line-height: 1.6;
}

.doc-preview.html-preview .preview-content h1,
.doc-preview.html-preview .preview-content h2,
.doc-preview.html-preview .preview-content h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.doc-preview.html-preview .preview-content p {
    margin-bottom: 0.75rem;
}

.doc-preview.html-preview .preview-content ul,
.doc-preview.html-preview .preview-content ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Button Small Variant */
.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.btn-small .material-icons {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW BUILDER STYLES (Phase 9.6.2 - Simplified PDF Import)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Import Options Container */
.workflow-import-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.import-option {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.import-option-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a1a);
}

.import-option-header .material-icons {
    font-size: 1.2rem;
    color: var(--primary, #2196f3);
}

.import-option-body {
    padding: 1rem;
}

.import-option-body textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

/* File Upload Styling */
.file-input-hidden {
    display: none;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 2px dashed var(--border-color, #ccc);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-label:hover {
    background: var(--bg-tertiary, #e8e8e8);
    border-color: var(--primary, #2196f3);
}

.filename-display {
    margin-left: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

/* Divider */
.import-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-tertiary, #4b5563);
    font-size: 0.85rem;
}

.import-divider::before,
.import-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}

/* Extract Actions */
.extract-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light, #eee);
}

.extract-hint {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* Extraction Progress */
.extraction-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    background: #e3f2fd;
    border-radius: 8px;
    color: #1565c0;
}

.extraction-progress .spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.extraction-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    background: #ffebee;
    border-radius: 8px;
    color: #c62828;
}

/* Workflow Result Section */
.workflow-result-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-badge {
    font-size: 0.75rem;
    font-weight: normal;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 4px;
    margin-left: 0.5rem;
}

.source-info {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.evidence-level {
    padding: 0.2rem 0.5rem;
    background: #e8f5e9;
    border-radius: 4px;
    color: #2e7d32;
}

/* Workflow Stats */
.workflow-stats {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.workflow-stats .stat {
    text-align: center;
}

.workflow-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary, #2196f3);
}

.workflow-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

/* Workflow Visual Preview / Flowchart */
.workflow-visual-preview {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
}

/* Flowchart Tree Visualization */
.flowchart-container-wrapper {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
}

.flowchart-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light, #eee);
}

.flowchart-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.flowchart-legend .legend-item.condition .material-icons {
    color: #1976d2;
    font-size: 1rem;
}

.flowchart-legend .legend-item.result .material-icons {
    color: #388e3c;
    font-size: 1rem;
}

.flowchart-container.flowchart-tree {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.flowchart-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #e3f2fd;
    border: 2px solid #1976d2;
    border-radius: 20px;
    font-weight: 600;
    color: #1976d2;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.flowchart-start .material-icons {
    font-size: 1.1rem;
}

/* Decision Node Container */
.flowchart-decision {
    margin-left: 1rem;
}

/* Condition Node */
.flowchart-node.flowchart-condition {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 2px solid #1976d2;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 400px;
}

.flowchart-condition .node-diamond {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    border-radius: 4px;
    transform: rotate(0deg);
}

.flowchart-condition .node-diamond .material-icons {
    color: #1976d2;
    font-size: 1.25rem;
}

.flowchart-condition .node-content {
    flex: 1;
    min-width: 0;
}

.flowchart-condition .node-id {
    font-size: 0.75rem;
    font-family: monospace;
    color: #4b5563;
    margin-bottom: 0.25rem;
}

.flowchart-condition .node-question {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.3;
}

.flowchart-condition .node-field {
    margin-top: 0.35rem;
}

.flowchart-condition .node-field code {
    font-size: 0.75rem;
    background: rgba(25, 118, 210, 0.1);
    color: #1565c0;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.flowchart-condition .node-condition {
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.25rem;
    font-family: monospace;
}

/* Branch Tree Structure */
.flowchart-branches-tree {
    display: flex;
    gap: 1.5rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.branch-tree {
    display: flex;
    flex-direction: column;
}

.branch-connector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.branch-connector .branch-line {
    width: 20px;
    height: 2px;
    background: #ccc;
}

.branch-label-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
}

.branch-label-badge.yes {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.branch-label-badge.no {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.branch-content {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid #ddd;
}

.branch-tree.branch-yes .branch-content {
    border-left-color: #a5d6a7;
}

.branch-tree.branch-no .branch-content {
    border-left-color: #ef9a9a;
}

/* Result Node */
.flowchart-node.flowchart-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 350px;
    border-left: 4px solid #4caf50;
}

.flowchart-result .result-indicator {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    border-radius: 50%;
}

.flowchart-result .result-indicator .material-icons {
    font-size: 1rem;
    color: #388e3c;
}

.flowchart-result.severity-high {
    border-left-color: #f57c00;
    background: #fff8e1;
}

.flowchart-result.severity-high .result-indicator {
    background: #fff3e0;
}

.flowchart-result.severity-high .result-indicator .material-icons {
    color: #f57c00;
}

.flowchart-result.severity-critical {
    border-left-color: #d32f2f;
    background: #ffebee;
}

.flowchart-result.severity-critical .result-indicator {
    background: #ffcdd2;
}

.flowchart-result.severity-critical .result-indicator .material-icons {
    color: #d32f2f;
}

.flowchart-result.severity-low {
    border-left-color: #4caf50;
}

.flowchart-result .node-content {
    flex: 1;
    min-width: 0;
}

.flowchart-result .node-id {
    font-size: 0.75rem;
    font-family: monospace;
    color: #4b5563;
    margin-bottom: 0.15rem;
}

.flowchart-result .node-recommendation {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.3;
}

.flowchart-result .node-category-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    background: #e0e0e0;
    color: #666;
    border-radius: 3px;
    margin-top: 0.35rem;
}

.flowchart-result .node-details {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* Reference to already-visited node */
.flowchart-ref {
    font-size: 0.8rem;
    color: #4b5563;
    font-style: italic;
    padding: 0.5rem;
}

/* Empty branch placeholder */
.flowchart-empty-branch {
    font-size: 0.8rem;
    color: #ccc;
    padding: 0.5rem;
}

.flowchart-unknown {
    padding: 0.5rem;
    color: #4b5563;
    font-size: 0.85rem;
}

.flowchart-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary, #666);
}

/* Refine Actions */
.workflow-refine-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light, #eee);
}

/* Legacy Workflow Nodes List (kept for compatibility) */
.workflow-nodes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.workflow-empty-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
    color: var(--text-secondary, #666);
}

.workflow-empty-state .material-icons {
    font-size: 1.5rem;
    color: var(--text-tertiary, #4b5563);
}

/* Add Buttons */
.workflow-add-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Workflow Node Card */
.workflow-node-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.workflow-node-card.condition-node {
    border-left: 4px solid #2196f3;
}

.workflow-node-card.result-node {
    border-left: 4px solid #4caf50;
}

.node-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-light, #eee);
}

.node-type-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.node-type-badge.condition {
    background: #e3f2fd;
    color: #1565c0;
}

.node-type-badge.result {
    background: #e8f5e9;
    color: #2e7d32;
}

.node-type-badge .material-icons {
    font-size: 0.9rem;
}

.node-id-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-light, #ddd);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    background: var(--bg-primary, #fff);
}

.node-body {
    padding: 1rem;
}

.node-body .form-group {
    margin-bottom: 0.75rem;
}

.node-body .form-group:last-child {
    margin-bottom: 0;
}

/* Branches Section */
.branches-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light, #eee);
}

.branches-section > label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-bottom: 0.5rem;
}

.branch-label {
    font-size: 0.8rem;
    font-weight: 500;
}

.branch-label.true-branch {
    color: #2e7d32;
}

.branch-label.false-branch {
    color: #c62828;
}

/* Workflow Preview Container */
.workflow-preview-container {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    min-height: 150px;
    max-height: 400px;
    overflow-y: auto;
}

.workflow-preview {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-start {
    padding: 0.5rem 0.75rem;
    background: #e3f2fd;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #1565c0;
}

.preview-node {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.75rem;
}

.preview-node.is-start {
    box-shadow: 0 0 0 2px #2196f3;
}

.preview-node.preview-condition {
    border-left: 3px solid #2196f3;
}

.preview-node.preview-result {
    border-left: 3px solid #4caf50;
}

.preview-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.preview-node-icon {
    font-size: 1rem;
}

.preview-node-id {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    background: var(--bg-tertiary, #f1f3f4);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.preview-node-content {
    font-size: 0.9rem;
    line-height: 1.4;
}

.preview-branches {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-light, #eee);
}

.preview-branch {
    font-size: 0.8rem;
    font-family: 'Consolas', 'Monaco', monospace;
}

.preview-branch.true {
    color: #2e7d32;
}

.preview-branch.false {
    color: #c62828;
}

/* Collapsible Sections */
.form-section.collapsible details {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
}

.collapsible-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 8px;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.collapsible-header:hover {
    background: var(--bg-tertiary, #f1f3f4);
}

.collapsible-header .material-icons {
    font-size: 1.1rem;
}

details[open] .collapsible-header {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

details[open] > .form-group {
    padding: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTH TRACKER BUILDER STYLES (Phase 9.6.3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Health Tracker Implementation Section */
.healthtracker-impl {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* AI Assist Section - shared styling */
.healthtracker-impl .ai-assist-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 8px;
}

.healthtracker-impl .ai-hint {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* Value Fields List */
.value-fields-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.value-field-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.field-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-light, #eee);
}

.field-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #666);
    background: var(--bg-tertiary, #e0e0e0);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.field-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .field-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
}

/* Alert Configuration */
.alert-config-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-level-section {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.alert-level-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    font-weight: 600;
    font-size: 0.9rem;
}

.alert-level-header .material-icons {
    font-size: 1.1rem;
}

.alert-level-name {
    flex: 1;
}

.alert-level-fields {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alert-field-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-field-name {
    min-width: 120px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a1a);
}

.alert-conditions {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.inline-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inline-label span {
    font-weight: 600;
    color: var(--text-secondary, #666);
}

.inline-label input[type="number"] {
    width: 100px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Operations Checkboxes */
.operations-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-option:hover {
    background: var(--bg-tertiary, #f1f3f4);
}

.checkbox-option input[type="checkbox"] {
    margin: 0;
}

.checkbox-option:has(input:checked) {
    background: #e3f2fd;
    border-color: #2196f3;
}

.checkbox-option span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Tracker Preview */
.healthtracker-impl .json-preview {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    max-height: 300px;
    margin: 0;
}

/* Collapsible Content */
.collapsible-content {
    transition: max-height 0.3s ease;
    overflow: hidden;
}

.collapsible-content.collapsed {
    display: none;
}

.collapse-icon {
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* Empty State */
.healthtracker-impl .empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary, #666);
    background: var(--bg-secondary, #f8f9fa);
    border: 1px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
}

/* Form Hint */
.form-hint {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECISION TABLE STYLES (Workflow Implementation)
   ═══════════════════════════════════════════════════════════════════════════ */

.decision-table-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.decision-table-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.decision-table-section h3 .source-badge {
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--accent-color, #4a90d9);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    margin-left: auto;
}

.decision-table-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

.decision-table-stats .stat strong {
    color: var(--text-primary, #1a1a1a);
    margin-right: 0.25rem;
}

.dt-section {
    margin-bottom: 1.5rem;
}

.dt-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary, #1a1a1a);
}

/* Decision Table */
.decision-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.decision-table thead {
    background: var(--bg-secondary, #f8f9fa);
}

.decision-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.decision-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
    vertical-align: middle;
}

.decision-table tbody tr:last-child td {
    border-bottom: none;
}

.decision-table tbody tr:hover {
    background: var(--bg-secondary-hover, #f8f9fa);
}

/* Decision Table Inputs */
.decision-table input[type="text"],
.decision-table select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--bg-primary, #fff);
    transition: border-color 0.2s ease;
}

.decision-table input[type="text"]:focus,
.decision-table select:focus {
    outline: none;
    border-color: var(--accent-color, #4a90d9);
}

.decision-table .dt-field {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

.decision-table .dt-type {
    min-width: 100px;
}

.decision-table .dt-condition {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

.decision-table .dt-severity {
    min-width: 90px;
}

.decision-table .rule-num {
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary, #666);
    width: 40px;
}

/* Delete button in table */
.decision-table .btn-icon {
    padding: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #4b5563);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.decision-table .btn-icon:hover {
    background: var(--danger-bg, #fee);
    color: var(--danger-color, #e53935);
}

.decision-table .btn-icon .material-icons {
    font-size: 1.125rem;
}

/* Default Outcome Section */
.default-outcome-section {
    background: var(--bg-secondary, #f8f9fa);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.default-outcome-section h4 {
    margin-top: 0;
}

.default-outcome-section .form-grid {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 1rem;
}

.default-outcome-section input,
.default-outcome-section select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Workflow Refine Actions */
.workflow-refine-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* Import Options */
.workflow-import-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.import-option {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.import-option-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    font-weight: 500;
    font-size: 0.9rem;
}

.import-option-header .material-icons {
    font-size: 1.125rem;
    color: var(--accent-color, #4a90d9);
}

.import-option-body {
    padding: 1rem;
}

.import-option-body textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
}

.import-divider {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--text-secondary, #4b5563);
    font-size: 0.8rem;
    font-weight: 600;
}

.import-divider span {
    background: var(--bg-secondary, #f8f9fa);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

/* Extract Actions */
.extract-actions {
    margin-top: 1rem;
}

.extraction-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg, #e3f2fd);
    color: var(--info-color, #1565c0);
    border-radius: 6px;
    font-size: 0.9rem;
}

.extraction-progress .spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.extraction-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--danger-bg, #ffebee);
    color: var(--danger-color, #c62828);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* File Upload Label */
.file-input-hidden {
    display: none;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px dashed var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.file-upload-label:hover {
    background: var(--bg-secondary-hover, #f0f0f0);
    border-color: var(--accent-color, #4a90d9);
}

.filename-display {
    margin-left: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW JSON EDITOR STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact import row */
.workflow-import-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.workflow-import-row .import-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-import-row textarea {
    width: 300px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
    resize: none;
}

/* Decision Table JSON Editor */
.decision-table-editor {
    margin-top: 1.5rem;
}

.decision-table-editor h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.decision-table-editor h3 .content-badge {
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    margin-left: auto;
}

/* JSON Editor Toolbar */
.json-editor-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.json-editor-toolbar .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.json-editor-toolbar .btn .material-icons {
    font-size: 1rem;
    margin-right: 0.25rem;
}

/* JSON Editor Container */
.json-editor-container {
    position: relative;
}

.json-editor {
    width: 100%;
    min-height: 350px;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    resize: vertical;
    tab-size: 2;
}

.json-editor:focus {
    outline: none;
    border-color: var(--accent-color, #4a90d9);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

/* Validation Message */
.json-validation-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.json-validation-message:empty {
    display: none;
}

.json-validation-message.success {
    background: var(--success-bg, #e8f5e9);
    color: var(--success-color, #2e7d32);
}

.json-validation-message.error {
    background: var(--danger-bg, #ffebee);
    color: var(--danger-color, #c62828);
}

.json-validation-message .material-icons {
    font-size: 1.125rem;
}

/* Help Section */
.json-help {
    margin-top: 1rem;
}

.json-help details {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
}

.json-help summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none;
}

.json-help summary .material-icons {
    font-size: 1.125rem;
    color: var(--text-secondary, #666);
}

.json-help summary:hover {
    background: var(--bg-secondary-hover, #f0f0f0);
}

.json-help .help-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-primary, #fff);
    font-size: 0.9rem;
}

.json-help .help-content p {
    margin: 0 0 0.75rem 0;
}

.json-help .help-content ul {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.json-help .help-content li {
    margin-bottom: 0.25rem;
}

.json-help .help-content code {
    background: var(--bg-secondary, #f5f5f5);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOW TEST PREVIEW
   Step 9 - Specialized test UI for workflow tools with AI profile generation
   ═══════════════════════════════════════════════════════════════════════════ */

.workflow-test-step {
    padding: 1rem;
}

.workflow-test-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .workflow-test-layout {
        grid-template-columns: 1fr;
    }
}

/* Input Panel */
.workflow-test-input-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.workflow-test-result-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.workflow-test-input-panel .panel-header,
.workflow-test-result-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.workflow-test-input-panel .panel-header h3,
.workflow-test-result-panel .panel-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.workflow-test-input-panel .panel-header h3 .material-icons,
.workflow-test-result-panel .panel-header h3 .material-icons {
    font-size: 1.25rem;
    color: var(--primary-color, #1976d2);
}

/* AI Profile Buttons */
.workflow-ai-profiles {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--bg-secondary, #f5f5f5) 0%, var(--bg-primary, #fff) 100%);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.workflow-ai-profiles .profile-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
}

.workflow-ai-profiles .profile-header .material-icons {
    font-size: 1.125rem;
    color: var(--primary-color, #1976d2);
}

.profile-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-profile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-profile:hover {
    border-color: var(--primary-color, #1976d2);
    background: var(--primary-light, #e3f2fd);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-profile:active {
    transform: translateY(0);
}

.btn-profile:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-profile .material-icons {
    font-size: 1.5rem;
}

.btn-profile .profile-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.profile-status {
    margin-top: 0.75rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.profile-status .material-icons {
    font-size: 1rem;
}

.profile-status .spinning {
    animation: spin 1s linear infinite;
}

/* Input Divider */
.workflow-test-input-panel .input-divider {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666);
}

.workflow-test-input-panel .input-divider::before,
.workflow-test-input-panel .input-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e0e0e0);
}

.workflow-test-input-panel .input-divider::before {
    margin-right: 1rem;
}

.workflow-test-input-panel .input-divider::after {
    margin-left: 1rem;
}

/* Workflow Input Fields */
.workflow-input-fields {
    padding: 1rem 1.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.workflow-input-group {
    margin-bottom: 1rem;
}

.workflow-input-group:last-child {
    margin-bottom: 0;
}

.workflow-input-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.workflow-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-primary, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.workflow-input:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.workflow-input::placeholder {
    color: var(--text-tertiary, #4b5563);
}

/* Run Test Button */
.workflow-test-input-panel #run-workflow-test-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 2.5rem);
    margin: 1rem 1.25rem;
    padding: 0.75rem 1.5rem;
}

/* Results Panel */
.workflow-test-results {
    padding: 1.25rem;
    min-height: 200px;
    overflow-y: auto;
    flex: 1;
}

.workflow-test-results .empty-results,
.workflow-test-results .loading-results,
.workflow-test-results .error-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary, #666);
}

.workflow-test-results .empty-results .material-icons,
.workflow-test-results .loading-results .material-icons {
    font-size: 3rem;
    color: var(--text-tertiary, #4b5563);
    margin-bottom: 1rem;
}

.workflow-test-results .error-results .material-icons {
    font-size: 3rem;
    color: var(--error-color, #d32f2f);
    margin-bottom: 1rem;
}

.workflow-test-results .loading-results .spinning {
    animation: spin 1s linear infinite;
    color: var(--primary-color, #1976d2);
}

/* Workflow Result Display */
.workflow-result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    word-wrap: break-word;
}

.result-severity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 10px;
    border-left: 4px solid;
}

.result-severity .material-icons {
    font-size: 1.75rem;
}

.result-severity .severity-label {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.result-recommendation,
.result-reasoning,
.result-inputs,
.result-gaps {
    padding: 1rem;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
}

.result-recommendation h4,
.result-reasoning h4,
.result-inputs h4,
.result-gaps h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666);
}

.result-recommendation p,
.result-reasoning p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary, #1a1a1a);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.result-confidence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.result-confidence .confidence-label {
    color: var(--text-secondary, #666);
}

.result-confidence .confidence-value {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    text-transform: capitalize;
}

.inputs-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.input-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.input-item .input-key {
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.input-item .input-value {
    color: var(--text-primary, #1a1a1a);
}

.result-gaps ul {
    margin: 0;
    padding-left: 1.25rem;
}

.result-gaps li {
    font-size: 0.875rem;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.25rem;
}

/* Workflow Summary */
.workflow-summary {
    margin-top: auto;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f5f5f5);
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.workflow-summary h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666);
}

.summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    justify-content: flex-start;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 60px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color, #1976d2);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    text-align: center;
}

/* Info Box */
.workflow-input-fields .info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
}

.workflow-input-fields .info-box-gray {
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #666);
}

.workflow-input-fields .info-box .material-icons {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3.3: DATA SOURCE SUGGESTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.data-source-suggestions-section {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 50%, #e8f0fe 100%);
    border: 1px solid #d8b4fe;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.ds-section-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ds-section-header p {
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.skill-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.skill-context-badge .material-icons {
    color: #6366f1;
}

/* Card grid */
.data-source-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.data-source-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-left: 4px solid #6b7280;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.data-source-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Category border colors */
.data-source-card[data-category="public-downloadable"] {
    border-left-color: #22c55e;
}

.data-source-card[data-category="api-accessible"] {
    border-left-color: #3b82f6;
}

.data-source-card[data-category="user-owned"] {
    border-left-color: #f59e0b;
}

.data-source-card[data-category="reference-standard"] {
    border-left-color: #8b5cf6;
}

/* Card header */
.ds-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-card-icon {
    font-size: 18px;
    color: var(--text-secondary, #666);
}

.ds-category-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #666);
}

.data-source-card[data-category="public-downloadable"] .ds-category-badge {
    background: #dcfce7;
    color: #166534;
}

.data-source-card[data-category="api-accessible"] .ds-category-badge {
    background: #dbeafe;
    color: #1e40af;
}

.data-source-card[data-category="user-owned"] .ds-category-badge {
    background: #fef3c7;
    color: #92400e;
}

.data-source-card[data-category="reference-standard"] .ds-category-badge {
    background: #ede9fe;
    color: #5b21b6;
}

/* Priority dot */
.ds-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.ds-priority-dot.priority-high {
    background: #ef4444;
}

.ds-priority-dot.priority-medium {
    background: #f59e0b;
}

.ds-priority-dot.priority-low {
    background: #3b82f6;
}

/* Card content */
.ds-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0;
}

.ds-card-description {
    font-size: 0.8rem;
    color: var(--text-secondary, #555);
    margin: 0;
    line-height: 1.35;
}

.ds-card-url {
    font-size: 0.72rem;
    color: #6366f1;
    word-break: break-all;
    font-family: monospace;
}

.ds-card-reasoning {
    font-size: 0.75rem;
    color: var(--text-tertiary, #4b5563);
    margin: 0;
    font-style: italic;
}

/* Card action area */
.ds-card-action {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-card-action .btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
}

/* Fetch success badge */
.fetch-success {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #16a34a;
    font-size: 0.8rem;
    font-weight: 500;
}

.fetch-success .material-icons {
    color: #16a34a;
}

/* Fetching state */
.ds-fetching {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary, #666);
    font-size: 0.8rem;
}

/* Guidance text */
.ds-guidance {
    font-size: 0.78rem;
    color: var(--text-tertiary, #4b5563);
    font-style: italic;
    margin-top: 0.25rem;
}

/* Loading state */
.suggestions-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--text-secondary, #666);
}

.suggestions-loading p {
    font-size: 0.85rem;
    margin: 0;
}

/* Small spinner for inline use */
.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-top-color: var(--primary-color, #6366f1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────────────────
   AUTO-CONFIGURE SECTION
   ─────────────────────────────────────────────────────────────────────────── */

.auto-configure-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 0.5rem;
}

.auto-configure-section.auto-configure-running {
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    border-color: #4ade80;
}

.auto-configure-section.auto-configure-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.auto-configure-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #166534;
}

.auto-configure-error .auto-configure-header {
    color: #991b1b;
}

.auto-configure-header .material-icons {
    font-size: 1.25rem;
}

.auto-configure-header strong {
    font-size: 0.95rem;
}

.auto-configure-desc {
    font-size: 0.825rem;
    color: #15803d;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.auto-configure-status {
    font-size: 0.825rem;
    color: #166534;
    margin: 0 0 0.75rem 0;
}

.auto-configure-error-msg {
    font-size: 0.825rem;
    color: #991b1b;
    margin: 0 0 0.5rem 0;
    word-break: break-word;
}

.auto-configure-fallback {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
}

.auto-configure-hint {
    display: inline-block;
    margin-left: 0.75rem;
    color: #6b7280;
}

/* Accent button (green gradient) */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.btn-accent:hover:not(:disabled) {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
    transform: translateY(-1px);
}

.btn-accent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-accent .material-icons {
    font-size: 1.1rem;
}

/* Indeterminate progress bar */
.auto-configure-progress {
    width: 100%;
    height: 4px;
    background: #bbf7d0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-indeterminate {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 2px;
    animation: indeterminate 1.5s ease-in-out infinite;
}

@keyframes indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Section divider ("OR configure step-by-step") */
.section-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #d1d5db);
}

.section-divider span {
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}