.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-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); }

/* Result banner */
#result { animation: fade-in 0.3s var(--ease-out); }

.result-banner {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.result-banner.safe {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
}
.result-banner.danger {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
}

.banner-main { display: flex; align-items: center; gap: var(--sp-4); }
.result-icon { font-size: 2rem; line-height: 1; }
.result-status { font-weight: 600; font-size: var(--text-lg); }
.result-conf { font-size: var(--text-sm); color: var(--text-2); margin-top: var(--sp-1); }
.result-time { font-size: var(--text-xs); color: var(--text-3); font-family: var(--mono); }

.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);
}

/* Vehicle */
.vehicle-section { margin-bottom: var(--sp-4); }
.vehicle-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Known issues */
.issues-section { margin-bottom: var(--sp-6); }

.issue-card {
  background: var(--bg-1);
  border: 1px solid var(--border-0);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.issue-card + .issue-card { margin-top: var(--sp-3); }

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

.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); }