.tag-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:650;white-space:nowrap;line-height:1.4}
.tag-badge button{display:grid;place-items:center;width:14px;height:14px;padding:0;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:12px;line-height:1}
.tag-badge button:hover{opacity:1}
.tag-badges-preview{display:flex;flex-wrap:wrap;gap:4px}
.tag-badges-preview .tag-badge{padding:2px 7px;font-size:.66rem}
.tag-badges-preview:empty{display:none}

.tag-picker{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:#fff}
.tag-picker[hidden]{display:none}
.tag-picker-badges{display:flex;flex-wrap:wrap;gap:6px}
.tag-picker-input-wrap{position:relative;flex:1;min-width:120px}
.tag-picker-hash{position:absolute;left:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface-soft);color:var(--text-muted);font-size:.66rem;font-weight:800;line-height:1}
.tag-picker .tag-picker-input{width:100%;border:0;outline:0;font:inherit;font-size:.82rem;padding:4px 2px 4px 24px;background:transparent;color:var(--text-primary)}
.tag-picker-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:220px;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--border-subtle);border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.14)}
.tag-picker-list[hidden]{display:none}
.tag-picker-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 5px 5px 8px;border-radius:7px;cursor:pointer;font-size:.8rem;color:var(--text-secondary)}
.tag-picker-list li:hover{background:var(--surface-soft)}
.tag-picker-list li:hover .tag-picker-forget{opacity:1}
.tag-picker-list li[data-create]{font-weight:650;color:var(--text-primary)}
.tag-picker-list-badge{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tag-picker-forget{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-muted);opacity:0;cursor:pointer;font-size:13px;line-height:1;transition:opacity .12s ease}
.tag-picker-forget:hover{opacity:1!important;background:rgba(216,68,68,.12);color:var(--semantic-danger,#c0392b)}

.tag-tone-0{background:#e8ecff;color:#4152b3}
.tag-tone-1{background:#e3f7f0;color:#12805c}
.tag-tone-2{background:#fdeef4;color:#a83267}
.tag-tone-3{background:#fff1e0;color:#b5680c}
.tag-tone-4{background:#eaf6ff;color:#1a6fa8}
.tag-tone-5{background:#f1edff;color:#6a4fc7}
.tag-tone-6{background:#fdecec;color:#b83d3d}
.tag-tone-7{background:#edf7e6;color:#4c8a2a}