/* src/frontend/static/css/tags.css */

/* tags / badges */
.tag {
    position: relative;
    /* background: #D6FF3F; */
    background: var(--chip-bg);
    color: var(--text-inverse);
    /* color: #000000; */
    border-radius: 5px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    align-items: center;
    gap: 6px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* добавить префикс "#" визуально */
.tag::before {
    content: "#";
    margin-right: 6px;
    font-weight: 800;
    color: #000000;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--muted);
}
.tab .tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 auto;
    filter: grayscale(100%) opacity(.85);
}
.tab.active {
    background: var(--chip-bg);
    color: #111;
    font-weight:700;
}
.tab.active .tab-icon {
    filter: none;
}

.card .tag {
    padding: 5px 9px;
    font-size: 12px;
}