.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: var(--xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    background: var(--surface-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    line-height: 1.4;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: transparent;
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
}

.badge-accent {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-color: transparent;
}

.badge-gold {
    background: var(--accent-gold-subtle);
    color: var(--accent-gold);
    border-color: transparent;
}

.badge-favorite {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: transparent;
}

.badge-dim {
    background: var(--surface-bg);
    color: var(--text-dim);
}

.badge-error {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
}

.badge-sent {
    background: var(--success-bg);
    color: var(--success);
    border-color: transparent;
}

.badge-failed {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
}

.badge-ongoing {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-color: transparent;
}

.badge-reading { background: var(--info-bg); color: var(--info); border-color: transparent; }
.badge-plan_to_read { background: var(--surface-bg); color: var(--text-muted); }
.badge-completed { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-on_hold { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-dropped { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge-re_reading { background: var(--accent-primary-subtle); color: var(--accent-primary); border-color: transparent; }

.source-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}

.source-badge-royalroad { background: rgba(212, 165, 116, 0.15); color: #d4a574; }
.source-badge-scribblehub { background: rgba(116, 185, 212, 0.15); color: #74b9d4; }
.source-badge-webnovel { background: rgba(165, 116, 212, 0.15); color: #a574d4; }
.source-badge-wuxiaworld { background: rgba(212, 116, 116, 0.15); color: #d47474; }
.source-badge-mvlempyr { background: rgba(212, 180, 80, 0.15); color: #d4b450; }

.browse-rating {
    color: var(--warning);
    font-weight: var(--weight-bold);
}

.rec-score {
    font-size: var(--xs);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    font-size: var(--xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.tag:hover {
    background: var(--surface-bg-hover);
    color: var(--text-primary);
}

.tag.active {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-color: transparent;
}