.hero { text-align: center; padding: var(--sp-10) 0 var(--sp-6); }
.hero h1 { margin-bottom: var(--sp-2); }
.hero p  { color: var(--text-2); }

/* Input */
.input-section { margin-bottom: var(--sp-6); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-2); margin-bottom: var(--sp-1); }
.field textarea { resize: vertical; min-height: 72px; }

.input-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.samples { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.samples-label { font-size: var(--text-xs); color: var(--text-3); }
.sample-btn { cursor: pointer; transition: all var(--t-fast) var(--ease); }
.sample-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: transparent; }

/* Results */
#results { animation: fade-in 0.3s var(--ease-out); }

.result-section {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.section-label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin-bottom: var(--sp-3);
}

/* Hierarchy breadcrumb */
.hierarchy {
  display: flex; align-items: center; gap: var(--sp-1);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.hierarchy .level {
  font-size: var(--text-sm); font-weight: 500; color: var(--text-0);
}
.hierarchy .sep {
  color: var(--text-3); font-size: var(--text-xs);
}
.hierarchy .level:last-child { color: var(--accent); }

.scenario-info {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
}
.scenario-id {
  font-family: var(--mono); font-size: var(--text-sm);
  background: var(--bg-2); padding: 2px var(--sp-2);
  border-radius: var(--r-sm); color: var(--text-1);
}
.scenario-def {
  font-size: var(--text-sm); color: var(--text-2); line-height: 1.5;
}

/* Details grid */
.details-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
@media (max-width: 600px) { .details-grid { grid-template-columns: repeat(2, 1fr); } }

.detail-card {
  background: var(--bg-1);
  border: 1px solid var(--border-0);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.detail-label { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--sp-1); }
.detail-value { font-size: var(--text-sm); font-weight: 500; color: var(--text-0); }

/* Confidence colors */
.conf-high   { color: var(--success); }
.conf-medium { color: var(--warning); }
.conf-low    { color: var(--error); }

/* Sentiment */
.sent-positive { color: var(--success); }
.sent-negative { color: var(--error); }
.sent-neutral  { color: var(--text-2); }

/* Safety */
.safety-section {
  background: var(--bg-1);
  border: 1px solid var(--border-0);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.safety-section.danger { border-color: rgba(239,68,68,0.3); }
.safety-section.safe   { border-color: rgba(34,197,94,0.2); }

.safety-header { display: flex; align-items: flex-start; gap: var(--sp-3); }
.safety-icon { font-size: 1.5rem; line-height: 1; }
.safety-status { font-weight: 600; font-size: var(--text-base); }
.safety-reason { font-size: var(--text-sm); color: var(--text-2); margin-top: var(--sp-1); line-height: 1.5; }

/* Known issues */
.known-issue {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}
.known-issue + .known-issue { margin-top: var(--sp-2); }
.ki-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.ki-key { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.ki-risk { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--r-full); font-weight: 500; }
.ki-risk.critical { background: rgba(239,68,68,0.15); color: var(--error); }
.ki-risk.non-critical { background: rgba(234,179,8,0.15); color: var(--warning); }
.ki-summary { color: var(--text-2); line-height: 1.5; }
.ki-vehicle { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-1); }

/* Footer */
.result-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
}
.timing { font-size: var(--text-xs); color: var(--text-3); font-family: var(--mono); }
.feedback { display: flex; gap: var(--sp-1); }
.feedback-btn.active { color: var(--accent); }

/* Loading */
.loading-section {
  text-align: center; padding: var(--sp-10) 0;
}
.loading-section p { color: var(--text-3); font-size: var(--text-sm); margin-top: var(--sp-3); }