/* Kole UI Tag 样式 — 对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px */

.kole-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 1px 8px; box-sizing: border-box;
  font-size: 12px; line-height: 1; border-radius: 2px;
  background: var(--kole-color-brand-bg); color: var(--kole-color-brand); white-space: nowrap;
  border: 1px solid transparent;
}

/* 状态预设 */
.kole-tag.kole-tag-green  { background: var(--kole-color-tag-green-bg); color: var(--kole-color-success); }
.kole-tag.kole-tag-red    { background: #FFF1F0; color: var(--kole-color-error); }
.kole-tag.kole-tag-orange { background: #FFF7E6; color: var(--kole-color-warning); }
.kole-tag.kole-tag-gray   { background: var(--kole-color-disabled-bg); color: var(--kole-color-text-secondary); }

/* S2-P5 暗色覆盖：浅底在深色下改为语义色半透明底，文字用暗色提亮值（对比度 ≥4.5:1 实测） */
html.kole-dark .kole-tag.kole-tag-red    { background: rgba(242,109,109,0.18); }
html.kole-dark .kole-tag.kole-tag-orange { background: rgba(229,163,0,0.18); }

/* 自定义颜色（行内 style 提供 --kole-tag-color / --kole-tag-bg） */
.kole-tag.kole-tag-custom { background: var(--kole-tag-bg); color: var(--kole-tag-color); }

/* 圆点模式 */
.kole-tag.kole-tag-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* 关闭按钮 */
.kole-tag-close { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-inline-end: -2px; border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; color: inherit; opacity: .65; }
.kole-tag-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }