* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #0a0e17; color: #c9d1d9; min-height: 100vh; }
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); border: 1px solid #303640; padding: 16px 24px; border-radius: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
        .header h1 { font-size: 22px; color: #58a6ff; }
        .header h1 span { color: #8b949e; font-weight: 400; }
        .status-badge { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .status-badge.online { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
        .status-badge.offline { background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
        
        .tabs { display: flex; gap: 4px; margin-bottom: 20px; background: #161b22; padding: 6px; border-radius: 10px; border: 1px solid #303640; }
        .tab { flex: 1; padding: 12px 20px; background: transparent; border: none; color: #8b949e; cursor: pointer; font-size: 14px; font-weight: 500; border-radius: 6px; transition: all 0.2s; }
        .tab:hover { color: #c9d1d9; background: rgba(255,255,255,0.05); }
        .tab.active { color: #fff; background: #8b1a1a; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .card { background: #161b22; border: 1px solid #303640; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
        .card h2 { font-size: 14px; color: #58a6ff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
        
        /* Cost stats bar - NOW AT BOTTOM */
        .stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
        .stat { background: #161b22; border: 1px solid #303640; border-radius: 10px; padding: 12px; text-align: center; }
        .stat-val { font-size: 20px; font-weight: 700; color: #58a6ff; }
        .stat-val.anthropic { color: #d2a8ff; }
        .stat-val.openai { color: #3fb950; }
        .stat-val.digitalocean { color: #0080ff; }
        .stat-val.aws { color: #ff9900; }
        .stat-val.snowflake { color: #29b5e8; }
        .stat-label { font-size: 9px; color: #8b949e; text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px; }
        .stat-icon { font-size: 14px; margin-bottom: 2px; }
        
        /* Launch Pad Grid - Console Output 2/3, Recent Directives 1/3 */
        .launch-pad-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
        @media (max-width: 1000px) { .launch-pad-grid { grid-template-columns: 1fr; } }
        
        /* Console Output Styles */
        .console-output { background: #0d1117; border: 1px solid #303640; border-radius: 8px; height: 350px; overflow-y: auto; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; padding: 12px; }
        .console-line { padding: 2px 0; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
        .console-line.info { color: #8b949e; }
        .console-line.success { color: #3fb950; }
        .console-line.warning { color: #f0883e; }
        .console-line.error { color: #f85149; }
        .console-line.agent { color: #d2a8ff; }
        .console-line.tool { color: #58a6ff; }
        .console-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .console-toolbar button { background: #21262d; border: 1px solid #303640; border-radius: 4px; padding: 4px 10px; color: #8b949e; cursor: pointer; font-size: 11px; }
        .console-toolbar button:hover { background: #30363d; color: #c9d1d9; }
        .console-status { font-size: 11px; color: #8b949e; display: flex; align-items: center; gap: 6px; }
        .console-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; animation: blink 1s infinite; }
        .console-status .dot.inactive { background: #6e7681; animation: none; }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        
        /* Workflow Controls */
        .workflow-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
        .workflow-controls select { flex: 1; min-width: 200px; background: #0d1117; border: 1px solid #303640; border-radius: 6px; padding: 10px; color: #c9d1d9; font-size: 14px; }
        .workflow-controls button { background: #8b1a1a; border: none; border-radius: 6px; padding: 10px 16px; color: white; cursor: pointer; font-size: 13px; }
        .workflow-controls button:hover { background: #a52222; }
        .workflow-controls label { display: flex; align-items: center; gap: 6px; color: #8b949e; font-size: 12px; cursor: pointer; }
        
        /* DAG Tree Container */
        .dag-container { background: #0d1117; border: 1px solid #303640; border-radius: 10px; padding: 20px; min-height: 250px; max-height: 400px; overflow: auto; }
        .dag-tree { display: flex; flex-direction: column; gap: 0; position: relative; }
        .dag-level { display: flex; align-items: flex-start; position: relative; margin-left: 20px; }
        .dag-connector { width: 30px; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
        .dag-connector::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 50%; width: 2px; background: #303640; }
        .dag-connector::after { content: ''; position: absolute; left: 15px; top: 50%; width: 15px; height: 2px; background: #303640; }
        .dag-level:first-child .dag-connector::before { display: none; }
        .dag-node { flex: 1; background: #161b22; border: 1px solid #303640; border-radius: 8px; padding: 12px 16px; margin: 4px 0; cursor: pointer; transition: all 0.2s; display: flex; align-items: flex-start; gap: 12px; }
        .dag-node:hover { border-color: #58a6ff; background: #1c2128; }
        .dag-node.selected { border-color: #58a6ff; background: #1c2128; box-shadow: 0 0 0 1px #58a6ff; }
        .dag-node .node-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
        .dag-node .node-content { flex: 1; min-width: 0; }
        .dag-node .node-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .dag-node .node-name { font-size: 13px; color: #fff; font-weight: 500; }
        .dag-node .node-status { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
        .dag-node .node-status.running { background: rgba(240,136,62,0.15); color: #f0883e; animation: pulse 1.5s infinite; }
        .dag-node .node-status.completed { background: rgba(63,185,80,0.15); color: #3fb950; }
        .dag-node .node-status.failed, .dag-node .node-status.blocked { background: rgba(248,81,73,0.15); color: #f85149; }
        .dag-node .node-status.pending { background: rgba(139,148,158,0.15); color: #8b949e; }
        .dag-node .node-meta { font-size: 11px; color: #8b949e; display: flex; gap: 12px; flex-wrap: wrap; }
        .dag-node .node-meta .agent-tag { color: #58a6ff; }
        .dag-node .node-meta .tool-tag { color: #d2a8ff; }
        .dag-node .node-summary { font-size: 11px; color: #6e7681; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dag-node .node-summary.input { color: #8b949e; }
        .dag-node .node-summary.output { color: #3fb950; }
        .dag-node .node-summary.error { color: #f85149; }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
        
        /* Detail Panel - Used in Workflow, Artifacts, Logs */
        .detail-panel { background: #161b22; border: 1px solid #303640; border-radius: 10px; padding: 16px; margin-top: 16px; display: none; }
        .detail-panel.active { display: block; }
        .detail-panel h3 { font-size: 14px; color: #58a6ff; margin-bottom: 12px; }
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .detail-section { background: #0d1117; border-radius: 8px; padding: 12px; }
        .detail-section h4 { font-size: 11px; color: #8b949e; text-transform: uppercase; margin-bottom: 8px; }
        .detail-section pre { font-family: monospace; font-size: 11px; color: #c9d1d9; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
        .detail-section.full-width { grid-column: span 2; }
        
        /* Workflow Footer Stats */
        .workflow-stats { display: flex; gap: 12px; margin-top: 16px; }
        .workflow-stat { background: #0d1117; border: 1px solid #303640; border-radius: 8px; padding: 10px 16px; text-align: center; min-width: 70px; }
        .workflow-stat .wf-stat-val { font-size: 18px; font-weight: 700; }
        .workflow-stat .wf-stat-label { font-size: 9px; color: #8b949e; text-transform: uppercase; margin-top: 2px; }
        
        /* LEGEND - Global, shown in all tabs */
        .legend-bar { background: #0d1117; border: 1px solid #303640; border-radius: 8px; padding: 10px 16px; margin-top: 16px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
        .legend-bar h4 { font-size: 10px; color: #6e7681; text-transform: uppercase; margin-right: 8px; }
        .legend-group { display: flex; gap: 12px; align-items: center; }
        .legend-group::after { content: '|'; color: #303640; margin-left: 12px; }
        .legend-group:last-child::after { display: none; }
        .legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #8b949e; }
        .legend-item .icon { font-size: 12px; }
        .legend-item.k8s { color: #58a6ff; }
        .legend-item.app { color: #3fb950; }
        .legend-item.security { color: #f85149; }
        .legend-item.ui { color: #d2a8ff; }
        .legend-item.db { color: #f0883e; }
        .legend-item.infra { color: #29b5e8; }
        
        /* Artifacts Panel Styles */
        .artifacts-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
        @media (max-width: 900px) { .artifacts-grid { grid-template-columns: 1fr; } }
        .artifact-list { max-height: 500px; overflow-y: auto; }
        .artifact-item { background: #0d1117; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; border-left: 3px solid #303640; transition: all 0.2s; }
        .artifact-item:hover { background: #1c2128; border-left-color: #58a6ff; }
        .artifact-item.selected { background: #1c2128; border-left-color: #58a6ff; }
        .artifact-item .file-name { font-family: monospace; font-size: 12px; color: #58a6ff; margin-bottom: 4px; }
        .artifact-item .file-meta { font-size: 10px; color: #8b949e; display: flex; gap: 12px; }
        
        .artifact-detail { display: none; }
        .artifact-detail.active { display: block; }
        .artifact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
        .artifact-info { background: #0d1117; border-radius: 8px; padding: 12px; }
        .artifact-info label { font-size: 10px; color: #6e7681; text-transform: uppercase; display: block; margin-bottom: 4px; }
        .artifact-info .value { font-size: 13px; color: #c9d1d9; font-family: monospace; }
        .artifact-info .value.path { color: #58a6ff; }
        .artifact-info .value.status { display: inline-flex; align-items: center; gap: 6px; }
        .artifact-info .value.status.synced { color: #3fb950; }
        .artifact-info .value.status.pending { color: #f0883e; }
        .artifact-info .value.status.error { color: #f85149; }
        
        /* Diff View */
        .diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #303640; border-radius: 8px; overflow: hidden; }
        .diff-panel { background: #0d1117; }
        .diff-header { background: #161b22; padding: 8px 12px; font-size: 11px; color: #8b949e; text-transform: uppercase; border-bottom: 1px solid #303640; }
        .diff-header.before { color: #f85149; }
        .diff-header.after { color: #3fb950; }
        .diff-content { padding: 12px; max-height: 300px; overflow: auto; font-family: monospace; font-size: 11px; line-height: 1.6; }
        .diff-line { padding: 1px 4px; }
        .diff-line.added { background: rgba(63,185,80,0.15); color: #3fb950; }
        .diff-line.removed { background: rgba(248,81,73,0.15); color: #f85149; }
        .diff-line.unchanged { color: #6e7681; }
        .diff-line-num { display: inline-block; width: 30px; color: #484f58; text-align: right; margin-right: 8px; user-select: none; }
        
        /* Logs Styles */
        .log-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: #0d1117; padding: 4px; border-radius: 6px; }
        .log-tab { padding: 8px 16px; background: transparent; border: none; color: #8b949e; cursor: pointer; font-size: 12px; border-radius: 4px; }
        .log-tab:hover { background: rgba(255,255,255,0.05); color: #c9d1d9; }
        .log-tab.active { background: #21262d; color: #fff; }
        .logs-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
        .log-list { max-height: 350px; overflow-y: auto; }
        .log-item { background: #0d1117; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; border-left: 3px solid #303640; transition: all 0.2s; }
        .log-item:hover { background: #1c2128; }
        .log-item.selected { background: #1c2128; border-left-color: #58a6ff; }
        .log-item.info { border-left-color: #58a6ff; }
        .log-item.success { border-left-color: #3fb950; }
        .log-item.warning { border-left-color: #f0883e; }
        .log-item.error { border-left-color: #f85149; }
        .log-title { font-size: 12px; color: #c9d1d9; margin-bottom: 4px; }
        .log-title .agent-tag { color: #d2a8ff; font-weight: 600; margin-right: 6px; }
        .log-meta { font-size: 10px; color: #8b949e; display: flex; justify-content: space-between; }
        .log-status { text-transform: uppercase; font-weight: 600; }
        .log-status.success { color: #3fb950; }
        .log-status.error { color: #f85149; }
        .log-status.warning { color: #f0883e; }
        
        .log-detail { display: none; }
        .log-detail.active { display: block; }
        .log-detail-content { background: #0d1117; border-radius: 8px; padding: 16px; }
        .log-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #303640; }
        .log-detail-title { font-size: 14px; color: #fff; }
        .log-detail-time { font-size: 11px; color: #8b949e; }
        .log-detail-body { font-family: monospace; font-size: 12px; line-height: 1.6; color: #c9d1d9; white-space: pre-wrap; max-height: 250px; overflow-y: auto; }
        
        /* Empty state */
        .empty-state { text-align: center; padding: 60px 20px; color: #6e7681; }
        .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
        
        /* History list styles */
        .history-list { max-height: 320px; overflow-y: auto; }
        .history-item { background: #0d1117; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; border-left: 3px solid #303640; transition: all 0.2s; }
        .history-item:hover { background: #1c2128; }
        .history-item.completed { border-left-color: #3fb950; }
        .history-item.failed, .history-item.blocked { border-left-color: #f85149; }
        .history-item.running { border-left-color: #f0883e; }
        .history-title { font-size: 12px; color: #fff; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .history-meta { font-size: 10px; color: #8b949e; display: flex; justify-content: space-between; }
        .history-status { text-transform: uppercase; font-weight: 600; font-size: 9px; }
        .history-status.completed { color: #3fb950; }
        .history-status.failed, .history-status.blocked { color: #f85149; }
        
        /* Input section */
        .input-section { background: linear-gradient(135deg, #161b22 0%, #1c2128 100%); border: 1px solid #303640; border-radius: 12px; padding: 24px; margin-bottom: 20px; }
        .input-section h2 { font-size: 18px; color: #fff; margin-bottom: 16px; }
        .prompt-input { width: 100%; background: #0d1117; border: 2px solid #303640; border-radius: 10px; padding: 16px; color: #c9d1d9; font-size: 14px; min-height: 100px; resize: vertical; font-family: inherit; }
        .prompt-input:focus { outline: none; border-color: #58a6ff; }
        .execute-btn { background: linear-gradient(135deg, #8b1a1a 0%, #a52222 100%); color: #fff; border: none; border-radius: 10px; padding: 14px 32px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; }
        .execute-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,26,26,0.4); }

/* Header logo styles */
.header-left { display: flex; align-items: center; gap: 12px; }

/* Make black logo visible on dark theme */
    height: 40px; 
    width: auto; 
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Invert logo for dark theme - white on transparent */
}

/* Logo - white logo on dark background */
    height: 40px; 
    width: auto; 
    background: #0d1117;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Logo - invert to white figures on dark background */
    height: 40px; 
    width: auto; 
    padding: 4px 8px;
    border-radius: 6px;
    background: transparent;
}

/* Logo - use as-is */
    height: 40px; 
    width: auto;
}

/* Logo styling */
    height: 40px; 
    width: auto;
}

/* Logo styling */

/* Logo styling */
.header-logo { height: 40px; width: auto; }

/* GitHub-style Artifacts Viewer */
.artifacts-container { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: 600px; background: #0d1117; border: 1px solid #303640; border-radius: 8px; overflow: hidden; }

/* File Explorer */
.file-explorer { background: #161b22; border-right: 1px solid #303640; display: flex; flex-direction: column; }
.explorer-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #303640; background: #0d1117; }
.explorer-title { font-size: 13px; font-weight: 600; color: #c9d1d9; }
.explorer-refresh { background: none; border: none; color: #8b949e; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 4px; }
.explorer-refresh:hover { background: #21262d; color: #c9d1d9; }
.file-tree { flex: 1; overflow-y: auto; padding: 8px 0; }

/* File Tree Items */
.tree-item { display: flex; align-items: center; padding: 6px 16px; cursor: pointer; color: #c9d1d9; font-size: 13px; font-family: monospace; }
.tree-item:hover { background: #21262d; }
.tree-item.selected { background: #1f6feb33; border-left: 2px solid #58a6ff; }
.tree-item .icon { margin-right: 8px; font-size: 14px; }
.tree-item .filename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item .status { font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 8px; }
.tree-item .status.added { background: rgba(63,185,80,0.2); color: #3fb950; }
.tree-item .status.modified { background: rgba(210,168,255,0.2); color: #d2a8ff; }
.tree-item .status.deleted { background: rgba(248,81,73,0.2); color: #f85149; }

/* Folder items */
.tree-folder { display: flex; align-items: center; padding: 6px 16px; color: #8b949e; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.tree-folder .icon { margin-right: 8px; }

/* File Viewer */
.file-viewer { display: flex; flex-direction: column; background: #0d1117; }
.file-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #303640; background: #161b22; }
.file-path { font-family: monospace; font-size: 13px; color: #58a6ff; }
.file-actions { display: flex; gap: 4px; }
.view-toggle { background: #21262d; border: 1px solid #303640; color: #8b949e; padding: 4px 12px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.view-toggle:hover { background: #30363d; color: #c9d1d9; }
.view-toggle.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* File Meta Bar */
.file-meta-bar { display: flex; gap: 24px; padding: 8px 16px; background: #161b22; border-bottom: 1px solid #303640; font-size: 12px; }
.meta-item { color: #8b949e; }
.meta-label { color: #6e7681; margin-right: 4px; }
.meta-item .synced { color: #3fb950; }
.meta-item .pending { color: #f0883e; }
.meta-item .error { color: #f85149; }

/* Diff Views */
.diff-view { flex: 1; overflow: hidden; }
.split-view { display: grid; grid-template-columns: 1fr 1fr; }
.diff-pane { display: flex; flex-direction: column; overflow: hidden; }
.before-pane { border-right: 1px solid #303640; }
.pane-header { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: #161b22; border-bottom: 1px solid #303640; }
.pane-header.before { color: #f85149; }
.pane-header.after { color: #3fb950; }
.pane-header.unified { color: #d2a8ff; }

/* Code Container */
.code-container { flex: 1; overflow: auto; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; line-height: 1.6; }
.empty-code { padding: 40px; text-align: center; color: #6e7681; }

/* Code Lines */
.code-line { display: flex; min-height: 20px; }
.line-num { min-width: 50px; padding: 0 12px; text-align: right; color: #6e7681; background: #161b22; border-right: 1px solid #303640; user-select: none; }
.line-content { flex: 1; padding: 0 12px; white-space: pre; color: #c9d1d9; }
.code-line.added { background: rgba(63,185,80,0.15); }
.code-line.added .line-content { color: #3fb950; }
.code-line.added .line-num { background: rgba(63,185,80,0.2); }
.code-line.removed { background: rgba(248,81,73,0.15); }
.code-line.removed .line-content { color: #f85149; }
.code-line.removed .line-num { background: rgba(248,81,73,0.2); }
.code-line.unchanged { background: transparent; }

/* Unified diff specific */
.unified-view .code-line.added .line-content::before { content: '+'; margin-right: 8px; font-weight: bold; }
.unified-view .code-line.removed .line-content::before { content: '-'; margin-right: 8px; font-weight: bold; }