.zf-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.zf-tag--default { background: #E5E7EB; color: #374151; }
.zf-tag--success { background: #3FADA7; color: #fff; }
.zf-tag--danger { background: #F05F6B; color: #fff; }
.zf-tag--warning { background: #FFC905; color: #1E1E1E; }
.zf-tag--info { background: #1870D1; color: #fff; }

/* Dark mode */
html[data-theme="dark"] .zf-tag--default {
    background: #30363D;
    color: #C9D1D9;
}

html[data-theme="dark"] .zf-tag--success {
    background: #238636;
    color: #E6EDF3;
}

html[data-theme="dark"] .zf-tag--danger {
    background: #B62324;
    color: #E6EDF3;
}

html[data-theme="dark"] .zf-tag--warning {
    background: #BB8009;
    color: #E6EDF3;
}

html[data-theme="dark"] .zf-tag--info {
    background: #1F6FEB;
    color: #E6EDF3;
}