.cl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.01em;
    vertical-align: middle;
    border: none;
}
.cl-sm { padding: 2px 8px; font-size: 10.5px; border-radius: 8px; }
.cl-lg { padding: 4px 13px; font-size: 12.5px; border-radius: 12px; }

.cl-blue       { color: #3a7ec7; background: rgba(74,144,217,.12); }
.cl-orange     { color: #c4712a; background: rgba(224,137,58,.13); }
.cl-red        { color: #bf4444; background: rgba(217,92,92,.13); }
.cl-green      { color: #2e9160; background: rgba(69,176,124,.12); }
.cl-gray       { color: #5f6b77; background: rgba(142,153,164,.13); }
.cl-black      { color: #3d4451; background: rgba(61,68,81,.12); }
.cl-navy       { color: #274d6e; background: rgba(52,86,122,.12); }
.cl-purple     { color: #6e529a; background: rgba(142,107,181,.13); }
.cl-light-blue { color: #3d8fb5; background: rgba(91,174,212,.12); }
.cl-yellow     { color: #8f6e0a; background: rgba(201,162,39,.13); }
.cl-pink       { color: #963663; background: rgba(192,80,128,.12); }
.cl-teal       { color: #137568; background: rgba(26,158,143,.12); }
.cl-dark       { color: #2c3e50; background: rgba(44,62,80,.11); }
.cl-indigo     { color: #3a4a9a; background: rgba(92,107,192,.12); }
.cl-brown      { color: #6b4e46; background: rgba(141,110,99,.12); }

@media (max-width: 768px) {
    .cl    { padding: 2px 8px; font-size: 10.5px; }
    .cl-lg { padding: 3px 11px; font-size: 11.5px; }
}