#sample-result { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.sample-result { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); margin-top: var(--space-8); align-items: start; }
.sample-result__score { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.sample-result__bars { margin-top: var(--space-6); }
.sample-result__fix { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.sample-result__fix p.tag { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-text); font-weight: var(--font-weight-semibold); }
.sample-result__fix h3 { font-size: var(--font-size-lg); margin-top: var(--space-2); }
.sample-result__fix pre { margin-top: var(--space-4); background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface)); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-family-mono); font-size: var(--font-size-xs); border: 1px solid var(--color-border); }
.sample-result__fix mark { background: color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-warning); padding: 0 2px; border-radius: var(--radius-sm); }
.sample-result__caption { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: var(--space-4); max-width: 65ch; }

@media (max-width: 860px) {
  .sample-result { grid-template-columns: 1fr; }
}