body { align-items: flex-start; overflow-y: auto; }

#eval-app { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

.eval-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.eval-header h1 { font-size: 1.5rem; color: #f8fafc; margin: 0; }
.eval-subtitle { color: #64748b; font-size: 0.875rem; }
.eval-header-right { display: flex; gap: 0.75rem; align-items: center; }

.btn-back { color: #94a3b8; text-decoration: none; font-size: 0.875rem; padding: 0.5rem 0.75rem; border: 1px solid #334155; border-radius: 0.375rem; }
.btn-back:hover { color: #e2e8f0; border-color: #6366f1; }
.btn-run { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
.btn-export { padding: 0.5rem 1rem; background: transparent; border: 1px solid #334155; border-radius: 0.375rem; color: #94a3b8; font-size: 0.8125rem; cursor: pointer; }
.btn-export:hover:not(:disabled) { border-color: #6366f1; color: #a5b4fc; }
.btn-export:disabled { opacity: 0.4; cursor: not-allowed; }

/* Progress */
#eval-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.progress-bar { flex: 1; height: 6px; background: #1e293b; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #6366f1; border-radius: 3px; width: 0%; transition: width 0.3s; }
#progress-text { color: #94a3b8; font-size: 0.8125rem; white-space: nowrap; }

/* Summary row */
#summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.summary-card { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1rem; }
.summary-card .model-name { font-size: 0.8125rem; color: #94a3b8; margin-bottom: 0.375rem; }
.summary-card .avg-score { font-size: 1.75rem; font-weight: 700; }
.summary-card .breakdown { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
.c-green { color: #4ade80; }
.c-yellow { color: #facc15; }
.c-red { color: #f87171; }

/* Test case cards */
.tc-card { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.tc-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.tc-prompt { color: #e2e8f0; font-size: 0.875rem; line-height: 1.5; flex: 1; }
.tc-category { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.6875rem; background: #0f172a; color: #94a3b8; border: 1px solid #334155; white-space: nowrap; flex-shrink: 0; }

/* Model results grid inside each card */
.model-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.model-result { background: #0f172a; border: 1px solid #2d3a4d; border-radius: 0.5rem; padding: 0.75rem; }
.model-result .mr-name { font-size: 0.75rem; color: #64748b; font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.model-result .mr-status { color: #64748b; font-style: italic; font-size: 0.8125rem; }
.model-result .mr-status.running { color: #a5b4fc; }

/* Scores row */
.mr-scores { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.375rem; }
.pill { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; background: #1e293b; border: 1px solid #2d3a4d; }
.pill.s5 { color: #4ade80; border-color: #166534; }
.pill.s4 { color: #a3e635; border-color: #3f6212; }
.pill.s3 { color: #facc15; border-color: #854d0e; }
.pill.s2 { color: #fb923c; border-color: #9a3412; }
.pill.s1 { color: #f87171; border-color: #991b1b; }

.mr-metrics { font-size: 0.6875rem; color: #64748b; margin-top: 0.25rem; }
.mr-explanation { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; font-style: italic; }

/* Expandable response */
.mr-response { margin-top: 0.5rem; }
.mr-response summary { font-size: 0.75rem; color: #6366f1; cursor: pointer; }
.mr-response pre { background: #1e293b; padding: 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; color: #e2e8f0; white-space: pre-wrap; word-wrap: break-word; margin-top: 0.375rem; max-height: 200px; overflow-y: auto; }