.diagnostic-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.diagnostic-token {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9rem;
}

.diagnostic-token--article_code { background: #e3f2fd; border: 1px solid #90caf9; }
.diagnostic-token--agency_code { background: #f3e5f5; border: 1px solid #ce93d8; }
.diagnostic-token--oc_code { background: #ede7f6; border: 1px solid #b39ddb; }
.diagnostic-token--condition_type { background: #e0f7fa; border: 1px solid #4dd0e1; }
.diagnostic-token--client_code { background: #e8f5e9; border: 1px solid #81c784; }
.diagnostic-token--original_rate_code { background: #fff3e0; border: 1px solid #ffcc80; }
.diagnostic-token--sequence_fragment { background: #fce4ec; border: 1px solid #ef9a9a; }
.diagnostic-token--unknown { background: #f5f5f5; border: 1px solid #bdbdbd; }

.diagnostic-token__type {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
}