<style>
.severity-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: var(--text-xs, 0.7rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
vertical-align: middle;
}
.severity-badge--critical {
color: var(--signal-red, #f87171);
background: rgba(248, 113, 113, 0.12);
}
.severity-badge--high {
color: var(--signal-amber, #fbbf24);
background: rgba(251, 191, 36, 0.12);
}
.severity-badge--medium {
color: var(--signal-amber, #fbbf24);
background: rgba(251, 191, 36, 0.10);
}
.severity-badge--low {
color: var(--signal-blue, #60a5fa);
background: rgba(96, 165, 250, 0.10);
}
.severity-badge--green {
color: var(--signal-green, #34d399);
background: rgba(52, 211, 153, 0.10);
}
</style>
{% if severity_tier %}
<span class="severity-badge severity-badge--{{ severity_tier|lower }}">{{ severity_tier }}</span>
{% endif %}
