.icon{width:32px;height:32px;background-size:contain;background-repeat:no-repeat;background-position:center;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:2px;opacity:0.8}
.icon-word {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%232B579A'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='18' fill='white' text-anchor='middle'%3EW%3C/text%3E%3C/svg%3E");}
.icon-excel{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%23217346'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='18' fill='white' text-anchor='middle'%3EX%3C/text%3E%3C/svg%3E");}
.icon-smath{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%232D2D2D'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='16' fill='%234FC3F7' text-anchor='middle'%3ES%3C/text%3E%3C/svg%3E");}
.icon-maxima{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%231A237E'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='16' fill='%23FFC107' text-anchor='middle'%3EM%3C/text%3E%3C/svg%3E");}
.icon-scilab{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%230072C6'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='16' fill='white' text-anchor='middle'%3ESc%3C/text%3E%3C/svg%3E");}
.icon-pptx{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%23D24726'/%3E%3Ctext x='16' y='22' font-family='Arial,sans-serif' font-weight='bold' font-size='16' fill='white' text-anchor='middle'%3EP%3C/text%3E%3C/svg%3E");}
.tooltip-target{position: relative;display: inline-block;cursor: pointer;}
.tooltip-target::after {
  content: attr(data-title);
  position: absolute;
  bottom: 120%;
  left:0;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
  font-size: 14px;
}
.tooltip-target:hover::after,.tooltip-target.active::after{opacity:1}
@media (hover: none) {
  .tooltip-target::after {
    font-size:20px;
    padding:16px 24px;
    white-space:normal;
    width: 250px;
  }
}