* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.6; }

/* Header */
.header { background: #1e293b; border-bottom: 1px solid #334155; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 1.25rem; color: #38bdf8; }
.status-badge { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.status-ok { background: #065f46; color: #6ee7b7; }
.status-off { background: #7f1d1d; color: #fca5a5; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1.5rem; }
.card h2 { font-size: 1rem; color: #94a3b8; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Tabs */
.tab-nav { display: flex; gap: 0; background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem 0.75rem 0 0; margin-bottom: 0; overflow-x: auto; }
.tab-btn { padding: 0.75rem 1.25rem; background: none; border: none; color: #94a3b8; cursor: pointer; font-weight: 600; font-size: 0.85rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: #e2e8f0; background: #334155; }
.tab-btn.active { color: #38bdf8; border-bottom-color: #38bdf8; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-content { background: #1e293b; border: 1px solid #334155; border-top: none; border-radius: 0 0 0.75rem 0.75rem; padding: 1.5rem; margin-bottom: 2rem; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; color: #94a3b8; font-size: 0.875rem; }
textarea, input[type="text"], select { width: 100%; padding: 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 0.5rem; color: #e2e8f0; font-family: inherit; font-size: 0.875rem; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: none; border-color: #38bdf8; }
select { cursor: pointer; }

/* Buttons */
button, .btn { background: #0ea5e9; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-weight: 600; font-size: 0.875rem; }
button:hover, .btn:hover { background: #0284c7; }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-purple { background: #7c3aed; }
.btn-purple:hover { background: #6d28d9; }
.btn-green { background: #059669; }
.btn-green:hover { background: #047857; }
.btn-red { background: #dc2626; }
.btn-red:hover { background: #b91c1c; }
.btn-gray { background: #475569; }
.btn-gray:hover { background: #334155; }
.btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Lists & Tables */
.run-list { list-style: none; }
.run-item { padding: 0.75rem; border-bottom: 1px solid #334155; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.run-item:hover { background: #334155; border-radius: 0.375rem; }
.run-status { font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 999px; }
.run-completed { background: #065f46; color: #6ee7b7; }
.run-failed { background: #7f1d1d; color: #fca5a5; }
.run-id { color: #64748b; font-family: monospace; font-size: 0.75rem; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #334155; font-size: 0.85rem; }
.data-table th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.data-table tr:hover { background: #334155; }

/* Report & Code Views */
.report-view { white-space: pre-wrap; font-family: monospace; font-size: 0.8rem; background: #0f172a; padding: 1rem; border-radius: 0.5rem; max-height: 500px; overflow-y: auto; border: 1px solid #334155; }

/* Steps Progress */
.steps-progress { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.step-badge { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: #334155; color: #94a3b8; }
.step-active { background: #0ea5e9; color: white; animation: pulse 1s infinite; }
.step-done { background: #065f46; color: #6ee7b7; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Misc */
.empty { color: #475569; font-style: italic; padding: 1rem; text-align: center; }
.tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.7rem; background: #334155; color: #94a3b8; margin-right: 0.25rem; }
.tag-quality { background: #1e3a5f; color: #7dd3fc; }
.tag-safety { background: #3b1f1f; color: #fca5a5; }
.tag-decision { background: #1e3a5f; color: #7dd3fc; }
.tag-audit { background: #2d2006; color: #fcd34d; }
.tag-automation { background: #1a2e1a; color: #86efac; }
.score-bar { height: 8px; border-radius: 4px; background: #334155; overflow: hidden; margin-top: 0.25rem; }
.score-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.score-high { background: #22c55e; }
.score-mid { background: #eab308; }
.score-low { background: #ef4444; }
.inline-flex { display: flex; gap: 0.5rem; align-items: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
#api-key-input { max-width: 300px; }